對元素焦點

Question

無限循環我有這樣的代碼：

$("body").on("focus", ".input", function() { 
     $("body").append("loop<br>"); 
     $(this).find("input").focus(); 
    }); 

小提琴：
http://jsfiddle.net/Hc3D8/

爲什麼它循環？

Answer 1

它循環，因爲你是附加功能的focus事件，它本身觸發focus事件。

儘管您在內部input元素上調用focus事件，但它仍會冒泡到外部元素.input。

要解決這一點，你可以鉤到一個不同的事件外元素：

$("body").on("click", ".input", function() { // click event 
    $("body").append("loop<br>"); 
    $(this).find("input").focus(); 
}); 

或者你可以在停止傳播focus的input：

$("body") 
    .on("focus", ".input", function() { 
     $("body").append("loop<br>"); 
     $(this).find("input").focus(); 
    }) 
    .on('focus', 'input', function(e) { 
     e.stopPropagation(); 
    }); 

Example fiddle

Answer 2

因爲您在事件處理程序中再次調用元素.focus()而觸發循環，這會在同一元素上觸發focus事件，從而再次觸發事件處理程序，從而導致它永久循環。

只是刪除$(this).find("input").focus();

編輯：停止事件傳播（和防止focus上input的DOM冒泡到.input並導致循環），你的代碼改成這樣：

$("body").on("focus", ".input", function() { 
     $("body").append("loop<br>"); 
     $(this).find("input").focus(function(e){ e.stopPropagation(); }); 
    }); 

Updated JSFiddle

Answer 3

因爲這會在體內找到輸入並將其聚焦並再次調用該焦點事件。 所以它是無限循環。

$("body").on("focus", ".input", function() { 
    $("body").append("loop<br>"); 
    $(this).find("input").focus(); //this finds the input in body and focus it and call this function again 
}); 

刪除$(this).find("input").focus();

$("body").on("focus", ".input", function() { 
    $("body").append("loop<br>"); 
}); 

Answer 4

它循環，因爲在代碼的最後一行：

$(this).find("input").focus(); 

下去，因爲它有一個附加事件與焦點運行，它會循環。

Answer 5

IE，Safari，Opera或Firefox中不產生這樣的問題，但Chrome是給這個問題。所以解決它，我們必須使用一些技巧。 我正在提供我自己的解決方案，即 我使用了可見性爲false的按鈕，並在關注焦點結束時嘗試點擊該按鈕以解決問題。像明智的我得到了解決方法。

另一個解決方案 用戶alert語句來解決它。