爲什麼這會導致最大調用堆棧錯誤？

我有一個最大的調用堆棧錯誤被這個代碼塊觸發：爲什麼這會導致最大調用堆棧錯誤？

$(".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文件或具有相同名稱，類或ID的HTML文件。以下是堆棧的樣子：

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行，直到超過堆棧大小。

來源

2017-01-04 Fibericon

每隔答案是正確的（event bubbling），這裏只是另一種解決方案：只需刪除的resume_upload從resume_box元素的按鈕。因此，觸發點擊按鈕不會冒泡到盒子，結束這個調用堆棧。

<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" />

這是一個工作codepen。

來源

2017-01-04 08:06:05 SinDeus

由於事件傳播事件在DOM樹上冒泡。

#resume_upload在.resume_box之內。點擊一個元素會發送一個冒泡到父級的事件。

在您的情況下，單擊父級觸發點擊傳播到父級處理程序的子級，然後觸發子級再次點擊，這會調用父級處理程序等等。

您可以通過手動防止傳播單擊內部元件的時候解決這個問題：

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

來源

2017-01-04 08:00:21 nem035

的問題是因爲你觸發父點擊處理程序內的子元素的點擊。然後這個事件將DOM向上傳播回父節點，這會觸發對傳播給父節點的子節點的點擊，從而觸發傳播的子節點...因此無限遞歸和堆棧錯誤。

爲了解決這個問題，你會更好，同時附加一個單擊處理這兩個元素，而不是編程方式創建的事件：

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

來源

2017-01-04 08:01:08

你在事件觸發的.resume_box click事件.resume_box的處理程序（因爲點擊事件冒泡了DOM）。相反，只有手動觸發點擊輸入，如果它不是已經在輸入點擊：

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

來源

2017-01-04 08:02:05 Paulpro

由於事件在dom樹中冒泡。因此，如果click綁定在父級上的事件將在子元素上觸發相同的click時得到執行。

因此，它創建一個循環，並導致你得到的錯誤。

解決方法是，您可以使用子元素上的event.stopPropagation();。

或者改變你的選擇是：

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

來源

2017-01-04 08:06:53 Jai

爲什麼這會導致最大調用堆棧錯誤？

回答

相關問題