Results 1 to 8 of 8

Thread: Ext.EventObject.stopEvent does not block "click" event in Firefox

  1. #1

    Question Ext.EventObject.stopEvent does not block "click" event in Firefox

    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,

    Code:
    <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

  2. #2

    Default

    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.

  3. #3

    Default

    Is it possible that a messed up z-index could do this?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892
    Answers
    41

    Default

    I won't block inline event handlers (onclick="DO NOT USE THEM!")

    It will stop navigation on links though.

    Drop this into examples/<anywhere>

    Code:
    <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>

  5. #5

    Default

    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,

    Code:
    <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

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892
    Answers
    41

    Default

    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.

  7. #7

    Default

    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

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Answers
    1

    Default

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

Similar Threads

  1. Why does EventObject.stopEvent fire "mousedown"?
    By Animal in forum Ext 3.x: Help & Discussion
    Replies: 18
    Last Post: 21 Oct 2009, 1:35 AM
  2. Now "right-click" or "contextmenu" event on Button?
    By dbassett74 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 11 Jul 2009, 10:19 AM
  3. Replies: 8
    Last Post: 22 Jun 2009, 8:56 PM
  4. Replies: 3
    Last Post: 24 Apr 2008, 10:08 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •