title: How can I trigger an element's default event within an event handler?
body: <p>I have an HTML button that needs to check several conditions, and if they pass allow the default action to occur. </p>
  
  <p>The following works in Firefox, but it fails in IE. I setup a click handler on the button:</p>
  
  <pre><code>Ext.get('send').on('click', handleSend, this, {
      preventDefault: true
  });
  </code></pre>
  
  <p>which pops up one of several message boxes if one of the conditions isn't met. If all conditions are met, I remove the click listener from the button and click the button again:</p>
  
  <pre><code>Ext.get('send').un('click', handleSend, this);
  
  Ext.getDom('send').click();
  </code></pre>
  
  <p>As far as I can tell, it fails in IE (and possibly other browsers) because click() isn't a standard function for a DOM element.</p>
  
  <p>If the default action were a simple form submit, I could just do that after the checks pass, but we're using Tapestry 4 with a listener, which doesn't get executed on a normal form submit.</p>
  
  <p>I've tried submitting the form with</p>
  
  <pre><code>tapestry.form.submit('composeForm', 'doSend');
  </code></pre>
  
  <p>but the <code>doSend</code> listener isn't getting called. </p>
  
  <p>Conditionally allowing the default event is the best solution I've come up with, but there are a couple of options that may be possible:</p>
  
  <ol>
  <li>Is there some other way to cause a Tapestry 4 listener to be fired from within Javascript? </li>
  <li>Is there any way to recognize the normal form submit in my Tapestry Page and thereby trigger the listener?</li>
  </ol>
  
  <p><strong><a href="http://jsfiddle.net/Gdges/7/" rel="nofollow">JSFiddle</a> added</strong></p>
  
  <p>In this <a href="http://jsfiddle.net/Gdges/7/" rel="nofollow">jsfiddle</a>, the default action is to submit the form; this is prevented when the checkbox is unchecked. When checked it removes the handler, but the call to click() doesn't work in IE. </p>
  
  <p>Is there a way to simulate a click in IE?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Another snag in the problem is that I have to display an 'are you sure' dialog, so in order to give them time to answer, the event has to be stopped. If they click OK, the default action needs to occur. JSFiddle doesn't seem to have ExtJS widgets like MessageBox, so I'm not sure how to demo this behavior.</p>
  
  <p>At @Ivan's suggestion I tried </p>
  
  <pre><code>Ext.getDom('send').fireEvent('onclick');
  </code></pre>
  
  <p>but it returns false, meaning the event is being cancelled somewhere. I then tried</p>
  
  <pre><code>var evt = document.createEvent("Event");
  evt.initEvent('click', false, false);
  var cancelled = Ext.getDom('send').fireEvent('onclick', evt);
  </code></pre>
  
  <p>but IE9 says that document.createEvent doesn't exist, even though this is how <a href="http://msdn.microsoft.com/en-us/library/ff975304%28v=VS.85%29.aspx" rel="nofollow">MSDN</a> says to do it.</p>