PDA

View Full Version : Ext.EventObject.stopEvent does not block "click" event in Firefox



john.dunlap
29 Jun 2010, 6:15 AM
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,


<span id="FindThis">
<input type="image" style="border-width: 0px;" alt="Blah" src="../blah" class="blah" title="blahblah" name="blahblah" id="blah">
</span>

<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.

john.dunlap
29 Jun 2010, 6:35 AM
Is it possible that a messed up z-index could do this?

Animal
30 Jun 2010, 1:16 AM
I won't block inline event handlers (onclick="DO NOT USE THEM!")

It will stop navigation on links though.

Drop this into examples/<anywhere>



<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var els = Ext.select('#FindThis > input, #FindThis > a'); // gets a Composite! Learn this!
els.on('click', function(eventObject, htmlElement, object){
alert('I am blocking the click event!');
eventObject.stopEvent();
});
});
</script>
<body>
<span id="FindThis">
<input type="image" style="border-width: 0px;" alt="Blah" src="../blah" class="blah" title="blahblah" name="blahblah" id="blah" onclick="alert('hah!')">
<br>
<a href="http://www.cyclingnews.com/">Cycling News</a>
</span>
</body>
</html>

john.dunlap
30 Jun 2010, 7:22 AM
Hi Animal, thank you for your reply!

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,




<a id="goog" href="http://www.google.com/">Google</a>
<script type="text/javascript">
Ext.get('goog').on('click', function(eventObject, htmlElement, object)
{
alert('Blocking access to google.com!');
eventObject.stopEvent();
});
</script>



If I paste that EXACT code into the html body of our application and click the link in Firefox 3.5.10 I see the alert and then I get sent to google.

If I paste that EXACT code into the html body of our application and click the link in IE8 I see the alert and I go not get sent to google.

If I paste that EXACT code into the html body of a skeleton Ext page and click the link I am not sent to google in either browser.

Earlier I was asking if the problem could be z-index related because we have had significant trouble with Ext and the z-indexes used elsewhere in our application. Other than that, I am baffled.

-John

Animal
2 Jul 2010, 12:53 PM
zIndex is only for position absolute elements. It specifies relative positions in the Z axis. Nothing to do with clicks.

Summat wrong with your app.

john.dunlap
2 Jul 2010, 2:20 PM
It's (unfortunately) an ASP application so it may have some of its own JS that it emits but our explicit JS includes are as follows,

Resources/Styles/resources/css/ext-all.css
Resources/Styles/resources/css/xtheme-gray.css
Resources/Styles/extjs-aux.css
Resources/Scripts/extjs/adapter/jQuery/ext-jquery-adapter.js
Resources/Scripts/extjs/ext-all.js

// We wrote these,
Resources/Scripts/UserClickInterceptor.js
Resources/Scripts/form_aux.js

Are we including everything from Extjs that we need or perhaps something that we shouldn't?
-John

Condor
2 Jul 2010, 11:19 PM
You have to put your code inside Ext.onReady to make sure the <a> element can be found (putting the <script> tag after the <a> tag isn't enough!).