对元素焦点

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语句来解决它。