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

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