如何設置一個專注於點擊的元素？

Question

基本上我有一個HTML 5視頻元素，點擊它我需要使它集中，所以我可以控制用戶鍵盤觸發器。

這是我的代碼：

$(function(){
    var focused_vid;
    $('.videoe').click(function(){ focused_vid = this });
    $(document).keydown(function(e){ 
        if (focused_vid){
            // keyboard handler
        }
    });
});

除了我的視頻元素，我還有一個文本框。 問題是一旦視頻聚焦它禁止我在我的文本框上鍵入並繼續觸發視頻處理程序的按鍵按鈕，即使我已經：

$(window).click(function(e) {
    $(e.srcElement.className).focus();
});

問候 ：）

Answer 1

不要使用event.srcElement它是Firefox不支持的非標准IE屬性。 使用所有現代瀏覽器都支持的event.target 。 嘗試使用.blur()方法將focus從視頻中移開。 有關如何執行此操作的示例，請參閱代碼段。

SNIPPET

 $(function() { var focused_vid; $('#vid1').click(function() { focused_vid = this }); $(document).keydown(function(e) { if (focused_vid) { console.log('focused on ' + e.target.className); } }); }); $(window).click(function(e) { $('#vid1').blur(); var tgt = e.target; $(tgt).focus(); console.log('focused on ' + tgt.className); }); 

 /* This just to prevent the console from obscuring the demo */ input { display: block; } .as-console-wrapper.as-console-wrapper { margin-left:270px; max-width: 250px; height: 100vh; color: blue; font: 400 15px/1.3 Consolas; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id='inp1' class='txt' tabindex='2' placeholder="Enter this video's title"> <video id="vid1" class='vid' src="http://html5demos.com/assets/dizzy.mp4" controls tabindex='1' width='250'></video> 

Answer 2

它也可以幫助別人。

var focused_vid=null;
$(function(){
    $('.videoe').click(function(){ focused_vid = this });
    $(document).keydown(function(e){ 
        if (focused_vid){
            // keyboard handler
        }
    });
});

function notfocused(){
    focused_vid=null;
}

后來我們可以調用非notfocused方法來刪除視頻處理鍵盤按鈕。

$(document).click(function(e) {
    $('.videoe').blur();
    var tgt = e.target;
    $(tgt).focus();
    if(tgt.className!="videoe")
        notfocused();
});