Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
    jbrantly@assuresign.com is on a distinguished road

      0  

    Default Links are prevented when tapping on children

    Links are prevented when tapping on children


    Touch version tested:
    • Touch 2.0.1.1
    Browser versions tested against:
    • iOS 5.0.1 Mobile Safari
    DOCTYPE tested against:
    • HTML5
    Description:
    In Mobile Safari, the zooming prevention code prevents the default behavior on touchstart. There is an exception to allow the default behavior on certain elements (inputs, anchors, etc), however, for anchors specifically there is no mechanism to see if the target element is a child of an anchor. This can be a problem for example if trying to make a button open a new window by causing it to be an anchor with a target. The button text is inside a span which has the event prevented. This causes taps on the primary area of the button to not work as intended.

    I have monkey patched some behavior in that essentially fixes the issue but it's probably fairly inefficient (and also not tested on Android, etc). It's provided simply to help demonstrate the issue.

    Test Case:
    Code:
    Ext.application({
    
    
        requires: ['Ext.Panel', 'Ext.Button'],
    
    
        launch: function() {
    
    
            Ext.Viewport.setPreventZooming(true);
    
    
            Ext.create('Ext.Panel', {
                fullscreen: true,
                items: [{
                    xtype: 'button',
                    text: 'Open in new window',
                    getElementConfig: function() {
                        return {
                            reference: 'element',
                            tag: 'a',
                            href: 'http://www.google.com',
                            target: '_blank',
                            children: this.getTemplate()
                        };
                    }
                }]
            });
            
            /* Uncomment this for a fix
            Ext.Viewport.setPreventZooming(false);
            Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){
                return !Ext.fly(e.target).findParent('a');
            });
            Ext.Viewport.setPreventZooming(true);
            */
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The reason is because you set the preventZooming config to true. Keep it to false and the tapping on the anchor element should work.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
    jbrantly@assuresign.com is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    The reason is because you set the preventZooming config to true. Keep it to false and the tapping on the anchor element should work.
    Understood. I presume that there is a benefit to keeping this turned on though, and the monkey patch I provided fixes the issue without turning it off. It is a somewhat niche case though and I could see a case being made that its not worth the small performance hit.

Thread Participants: 1