I am using Ext to enhance html input fields in existing forms. I am trying to block click events to regular HTML elements (input elements, images, hyperlinks, etc) to prevent form submission when there are client side validation errors in any of the Ext enhanced fields. I have this working (mostly). The problem is that when I attempt to use the Ext.EventObject.stopEvent function to block the click event.... It only works in IE. For example,

<script type="text/javascript">
Ext.onReady(function(){
var el = Ext.query('#FindThis > input');
Ext.get(el).on('click', function(eventObject, htmlElement, object){
alert('I am blocking the click event!');
eventObject.stopEvent();
});
});
</script>I see the alert in both browsers but the click event still fires in Firefox. For example, if the element is a hyperlink or a submit button the browser will still move to a different page.

Any thoughts would be greatly appreciated!
-John

john.dunlap

29 Jun 2010, 6:25 AM

That is strange.... I typed that example free hand and (by itself) it works both browsers..... However, when I use the EXACT same approach "in the wild" it does not work in Firefox. Weirdness.

In your example, the inline event handler is executed and then my event handler is executed and then the event is blocked, which blocks hyperlink navigation. This works in firefox, outside of our application.

However, using Firebug, I cannot find an onclick attribute in any of the elements to which I am attaching event listeners. What happens, in our application, is that my event handler is executed, and then the event is not blocked. So if the element is a hyperlink, my event handler fires, I call the stopEvent function and then the browser navigates to the location indicated by the hyperlink's href. The same thing happens when I try to attach to form input elements. In internet explorer it works fine. My event handler fires, I execute stopEvent, and the browser does not follow the hyperlink. For example, I added this to our application,