title: Why triggering a click event on a file input will trigger also submit event on form?
body: <p>I'm skinning a file input in an HTML form. I achieved the result by hiding the input, then I designed my own button and onclick on that button, I trigger the click event on the hidden input, to open the native browse window. This works, but when I close the browse window, the Javascript submit handler is triggered on form (but no submit really happen, only the event is triggered).</p>
  
  <p>I prepared a fiddle: <a href="http://jsfiddle.net/Ebcu5/" rel="nofollow">http://jsfiddle.net/Ebcu5/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="form"&gt;
      &lt;input id="file" type="file" name="photo" /&gt;
      &lt;button id="upload"&gt;Browse&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$("#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);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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; }
  </code></pre>