元素焦点上的无限循环

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();
});

或者您可以在input的focus停止传播：

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

示例小提琴

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(); } );
  });

更新的 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 的按钮，并且在焦点结束时的焦点输出事件试图单击该按钮，以便解决它。像明智的我得到了解决方法。

另一种解决方案用户警报语句来解决它。