为什么这会导致最大调用堆栈错误

Question

>我有一个最大调用堆栈错误由此代码块触发：

$(".resume_box").click(function () {
   $("#resume_upload").trigger("click");
});

这是它引用的 HTML：

<div class="resume_box">
   <div class="file_instructions"> Please use .pdf format</div>
   <div class="button_plate">Choose a file</div>
   <input id = "resume_upload" type = "file" name = "resume" style = "display: none" />
</div>

我已经检查过了，JS文件或HTML文件中没有其他具有相同名称，类或ID的内容。堆栈如下所示：

trigger @   jquery.min.js:4
(anonymous) @   jquery.min.js:4
each    @   jquery.min.js:2
each    @   jquery.min.js:2
trigger @   jquery.min.js:4
(anonymous) @   script.js:70
dispatch    @   jquery.min.js:3
r.handle    @   jquery.min.js:3
trigger @   jquery.min.js:4
(anonymous) @   jquery.min.js:4
each    @   jquery.min.js:2
each    @   jquery.min.js:2
trigger @   jquery.min.js:4
(anonymous) @   script.js:70

重复最后 8 行，直到超过堆栈大小。

Answer 1

问题是因为您要触发对父元素上单击处理程序中的子元素的单击。然后，此事件将 DOM 向上传播回父级，这会触发对子项的单击，该子项会传播到父级，从而触发子项，从而触发传播的子项...因此无限递归和堆栈错误。

要解决此问题，最好同时将单击处理程序附加到两个元素，而不是以编程方式创建事件：

$(".resume_box, #resume_upload").click(function(e) {
    e.stopPropagation(); // important, as it will prevent the event bubbling .: recursion
    // your logic here...
});

Answer 2

所有其他答案都是正确的（事件冒泡），这里只是另一种解决方案：只需从resume_box元素中删除resume_upload按钮即可。因此，触发对按钮的单击不会冒泡到框中，从而结束此调用堆栈。

<div class="resume_box">
  <div class="file_instructions"> Please use .pdf format</div>
  <div class="button_plate">Choose a file</div>
</div>
<input id="resume_upload" type="file" name="resume" style="display: none" />

这是一个有效的代码笔。

Answer 3

因为事件在 dom 树中冒泡。因此，如果在子元素上触发了相同的click，则绑定在父元素上的click事件将被执行。

因此，它会创建一个循环并导致您得到的错误。

解决方案是您可以在子元素上使用event.stopPropagation();。

或将选择器更改为：

$(".resume_box > .button_plate").click(function () {

Answer 4

您正在.resume_box的事件处理程序中触发.resume_box上的单击事件（因为单击事件会在 DOM 中冒泡）。相反，仅当输入尚未点击输入时，才手动触发点击：

$(".resume_box").click(function ( e ) {
   if ( e.target.id !== 'resume_upload' )
       $("#resume_upload").trigger("click");
});

Answer 5

因为事件传播，事件在 DOM 树上冒泡。

#resume_upload在.resume_box之内。单击元素会向父元素发送一个冒泡的事件。

在您的情况下，单击父级会触发对子项的单击，该单击将传播到父级的处理程序，

然后再次触发子项单击，该单击将调用父处理程序，依此类推。

您可以通过在单击内部元素时阻止手动传播来解决此问题：

$("#resume_upload").click(function (e) {
   e.stopPropagation();
});