Jquery 元素焦点上的无限循环

我有以下代码：

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

$（“body”）.on（“焦点”，“输入”，函数（）{
$（“正文”）。追加（“循环
”；
$（this.find（“input”）.focus（）；
});

小提琴：

---

它为什么循环？

它循环，因为您在事件处理程序中再次对元素调用了

.focus（）

，这会触发同一元素上的

focus

事件，从而再次触发事件处理程序，使其永远循环

只需删除

$（this.find（“input”）.focus（）

编辑：要停止事件传播（并防止
集中
在
输入上
将DOM冒泡到
。输入
并导致循环），请将代码更改为：

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

$（“body”）.on（“焦点”，“输入”，函数（）{
$（“正文”）。追加（“循环
”；
$（this.find（“input”）.focus（函数（e）{e.stopPropagation（）；}）；
});

它会循环，因为您在事件处理程序中再次调用元素上的
.focus（）
，这会触发同一元素上的
focus
事件，从而再次触发事件处理程序，使其永远循环

只需删除
$（this.find（“input”）.focus（）

编辑：要停止事件传播（并防止
集中
在
输入上
将DOM冒泡到
。输入
并导致循环），请将代码更改为：

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

$（“body”）.on（“焦点”，“输入”，函数（）{
$（“正文”）。追加（“循环
”；
$（this.find（“input”）.focus（函数（e）{e.stopPropagation（）；}）；
});

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

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

要解决此问题，可以在外部元素上挂接不同的事件：

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

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

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

要解决此问题，可以在外部元素上挂接不同的事件：

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

因为这会在body中找到输入并对其进行聚焦，然后再次调用此聚焦事件。
所以它是无限循环

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

因为这会在body中找到输入并对其进行聚焦，然后再次调用此聚焦事件。
所以它是无限循环

$("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();

因此，由于它有一个附加的事件要与焦点一起运行，它将循环。
由于代码中的最后一行，它将循环：

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

因此，由于它有一个附加的事件要与focus一起运行，它将循环。
IE、Safari、Opera、Firefox都没有造成这样的问题，但chrome给出了这个问题。因此，我们必须使用一些技巧来解决这个问题。
我提供自己的解决方案，即。
我使用了visibility为false的按钮，并在focus out的末尾使用了focus out事件，试图单击该按钮以解决问题。像怀斯一样，我找到了解决办法

另一个解决方案
用户提醒声明来解决这个问题。
IE、Safari、Opera、Firefox都没有制造这样的问题，但chrome却给出了这个问题。因此，我们必须使用一些技巧来解决这个问题。
我提供自己的解决方案，即。
我使用了visibility为false的按钮，并在focus out的末尾使用了focus out事件，试图单击该按钮以解决问题。像怀斯一样，我找到了解决办法

另一个解决方案
用户警报语句来解决此问题。
我将焦点放在
输入上，而不是
上。输入由于事件传播而导致的FezVrasta。您的
input
元素位于
.input
元素内，这意味着
input
上的
focus
事件会将DOM冒泡到
.input
中。@FezVrasta用一个有效的解决方案更新了我的答案您正在附加一个
focus
事件处理程序，不在
输入
@FezVrasta上调用
焦点
正是我的观点-这就是OP想要做的-我将焦点调用在
输入
，而不是事件传播引起的
输入
@FezVrasta上。您的
input
元素位于
.input
元素内，这意味着
input
上的
focus
事件会将DOM冒泡到
.input
中。@FezVrasta用一个有效的解决方案更新了我的答案您正在附加一个
focus
事件处理程序，不要在
输入上调用
焦点
@FezVrasta，这正是我的观点-这就是OP想要检查小提琴的地方。请解释你想做什么当我聚焦包装器时，请将焦点移到内部输入。请检查小提琴。解释你想做什么当我聚焦包装器时，将焦点移动到内部输入。那么，当我聚焦在.input div上时，如何聚焦.input div内的输入字段？在
.input
元素上使用不同的事件-可能
单击
@FezVrasta，您只需调用
输入
的
焦点
事件上的
e.stopPropagation（）
。查看我的答案以获得更新的工作解决方案谢谢它工作正常，但我已使用选择器
.input:not（.focus）
，因为我已经在元素聚焦时添加了
.focus
类，但是如果没有添加类，您的示例会更好。那么，当我关注.input div时，如何关注.input div中的输入字段呢？在
.input
元素上使用不同的事件-可能
单击
@FezVrasta，您只需要调用
e.stopPropagation（）
输入的
焦点事件上的
。请参阅我的答案以获取更新的工作解决方案。谢谢，它可以正常工作，但我已使用选择器
。输入：not（.focus）
，这仅仅是因为我在创建元素时已经添加了
.focus
类