Results 1 to 7 of 7

Thread: preventDefault does not work on IE10/IE11

    You found a bug! We've classified it as EXTJS-13775 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    Sweden
    Posts
    15
    Vote Rating
    2
      0  

    Default preventDefault does not work on IE10/IE11

    https://fiddle.sencha.com/#fiddle/6fd

    Works on Ext 4 but navigates on Ext 5.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,385
    Vote Rating
    1540
      0  

    Default

    I've opened a bug report for this. A better way to add a click listener would be:

    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    352
    Vote Rating
    104
      0  

    Default

    This is a side effect of the new Event Normalization in Ext JS 5 which attempts to translate mouse events into touch-friendly events (pointer events in the case of IE10/11). This means that a click listener actually gets translated to "tap" under the hood. Since tap is sythesized from pointerdown/pointerup, the actual browser event you are preventing default on is the pointerup event.

    You can work around this using the translate:false event option. Here's a slightly modified version of Mitch's example:

    Code:
    Ext.create('Ext.Component', {
        html      : '<a href="https://www.sencha.com">Sencha Homepage</a>',
        margin    : 20,
        renderTo  : Ext.getBody(),
        listeners : {
            element  : 'el',
            delegate : 'a',
            translate: false,
            click    : function(e) {
                e.preventDefault();
                
                Ext.Msg.alert('Test', 'Test');
            }
        }
    });
    translate:false tells the event system "No, really, I want to listen for an actual click event. Don't perform any event normalization". Keep in mind, of course, that if you use this option, your listener may not fire on devices that have touchevents (iPad, android, etc), although in this case I think you will be fine since the element is an anchor, and mobile webkit browsers do simulate click events when anchors are tapped.
    Phil Guerrant
    Ext JS - Development Team

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    Sweden
    Posts
    15
    Vote Rating
    2
      0  

    Default IE10/11 with Ext components that uses anchors

    Ok, thanks for your answer.

    But does this mean that there is a general problem with IE10/11 in the components that use anchor tags?

    For instance:
    http://dev.sencha.com/ext/5.0.0/exam.../#menu-buttons

    If I click on a menuitem the browser navigates.

  5. #5
    Sencha User Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    352
    Vote Rating
    104
      0  

    Default

    Yes it is a general problem with anchors in IE10/11. We are looking into a solution (possibly removing event translation for clicks, at least on windows/ie)

    in the mean time you can use this override to globally disable translation for click/dblclick:

    Code:
    Ext.define('EXTJS-13775', {
        override: 'Ext.dom.Element'
    }, function(Element) {
        var eventMap = Element.prototype.eventMap;
    
        eventMap.click = 'click';
        eventMap.dblclick = 'dblclick';
    });
    Phil Guerrant
    Ext JS - Development Team

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018
    Vote Rating
    125
      0  

    Default

    Hello Phil,

    We uses your override with ExtJS 5 and it appears to be working fine. Thank you.

    As for ExtJS 6, we had to remove it, because found that it makes a GridPanel Column's header menu unclickable in IE10/IE11.

    Still side effects of non-working .preventDefault() in IE come out from time to time.

    It would be awesome to get it fixed eventually. Are you still planning to fix it? Maybe, for ExtJS 6, at least, where it was reported as well:
    https://www.sencha.com/forum/showthread.php?303907
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    651
    Vote Rating
    14
      0  

    Default

    @Phil Guerrant

    In my experience, your patch prevents any click handling on an iPad with ExtJS 6. I used "translate : false" instead.

Posting Permissions

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