Question

我有这段代码：

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

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

为什么会循环？

Answer 1

它循环是因为您将一个函数附加到focus事件，该事件本身会触发focus事件。

即使您在内部focus元素上调用input事件，它仍会冒泡到外部.input元素。

要解决此问题，您可以挂钩外部元素上的其他事件：

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

或者您可以停止focus的{{1}}传播：

input

Example fiddle

Answer 2

它循环是因为你在事件处理程序内再次调用元素.focus()，它会触发同一元素上的focus事件，从而再次触发事件处理程序，导致它永远循环。 / p>

只需删除$(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正在解决这个问题。所以解决它我们必须使用一些技巧。我提供自己的解决方案，即我使用了具有可见性错误的按钮，并在焦点结束时关注焦点，尝试单击该按钮以便解决。我明智地得到了解决方法。

另一种解决方案用户警报声明来解决它。

在元素焦点的无限循环

5 个答案: