爲什麼觸發文件輸入的點擊事件也會觸發表單上的事件？

我正在爲HTML表單中的文件輸入蒙皮。我通過隱藏輸入來實現結果，然後我設計了自己的按鈕並點擊該按鈕，觸發隱藏輸入上的點擊事件以打開本機瀏覽窗口。這是有效的，但是當我關閉瀏覽窗口時，Javascript提交處理程序在窗體上觸發（但沒有真正發生，只有事件被觸發）。爲什麼觸發文件輸入的點擊事件也會觸發表單上的事件？

我準備了一個小提琴：http://jsfiddle.net/Ebcu5/

HTML：

<form id="form"> 
    <input id="file" type="file" name="photo" /> 
    <button id="upload">Browse</button> 
</form>

JS：

$("#form").submit(function(){ 
    alert('submit event triggered'); 
}); 

document.getElementById('upload').addEventListener('click',function(){ 
    var evt = document.createEvent("HTMLEvents"); 
    evt.initEvent("click", true, true); 
    uploading = true; 
    document.getElementById('file').dispatchEvent(evt); 
});

CSS：

input#file { position: fixed; top: -100px; } 
button { border: solid 3px black; border-radius: 3px; font-size: 18px; line-height: 20px; text-transform: uppercase; font-family: Arial; line-height: 31px; background: #fd6706; border-radius: 13px; }

來源

2013-11-26 Marco Marsala

很可能您錯過了診斷問題。我看到沒有ID =「上傳」的元素，我敢打賭這是按鈕。點擊一個按鈕會觸發提交事件，除非該按鈕被專門設置爲type =「button」。 http://jsfiddle.net/Ebcu5/1/ –

爲什麼你會像這樣一起使用普通的JS和jQuery？會更清潔，更簡單，只是jQuery ... –

對不起，這是一個複製和粘貼錯誤...我的按鈕有id =「上傳」的小提琴。上傳的文件。 –

解決。只需在上傳點擊事件處理程序中使用evt.preventDefault（）即可。

更新小提琴：http://jsfiddle.net/Ebcu5/2/

document.getElementById('upload').addEventListener('click',function(evt){ 
       evt.preventDefault(); 
    document.getElementById('file').click(); 
});

來源

2013-11-26 22:33:03

或只是按鈕的按鈕。鍵入=「按鈕」 –

@KevinB type =「button」爲我解決了它。這說得通。謝謝 – Marc

'e.preventDefault（）;'是魔術醬。 – doublejosh

變化：<button id="upload">Browse</button>

要：<button id="upload" type="button">Browse</button>

信用此去凱文B中他對另一個答案評論：

或只需讓按鈕成爲一個按鈕。類型=「按鈕」 - 凱文B 13年11月26日在22:35

只是希望它是一個實際的答案，所以人們會看到它，而不挖掘通過評論。

來源

2016-03-18 17:48:30 ThinkingCap

爲什麼觸發文件輸入的點擊事件也會觸發表單上的事件？

回答

相關問題