javascript - 为什么在文件输入上触发单击事件也会触发表单上的提交事件？

Question

我正在对 HTML 表单中的文件输入进行换肤。我通过隐藏输入来实现结果，然后我设计了自己的按钮并在该按钮上单击，我触发隐藏输入上的单击事件，以打开 native 浏览窗口。这是可行的，但是当我关闭浏览窗口时，表单上会触发 Javascript 提交处理程序(但实际上没有发生提交，仅触发了事件)。

我准备了一把 fiddle :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; }

Answer 1

已解决。只需在上传点击事件处理程序中使用 evt.preventDefault() 即可。

更新的 fiddle :http://jsfiddle.net/Ebcu5/2/

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