Double tap on mobile safari

Question

Is there a way to bind to a double-tap event (in a single line of code) for mobile safari? Or, the alternative is to implement it intercepting two single-tap events that happened in some short given time (example: http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/)?

Is the double tab not used for zoom? Is 2 tap events even fired in the browser? — Undefined, Apr 23 '12 at 09:47
same event that is used for zoom and I'd like to override the behavior for a concrete given situation — BreakPhreak, Apr 23 '12 at 09:49
Sorry if i'm not relating to your problem but if your displaying a webpage you can specify the viewport setting's in the meta tag. You can see this in the iwebkit from snippetspace. — evan.stoddard, May 17 '12 at 16:45

score 6 · Accepted Answer · edited May 23 '17 at 11:53

6

Short answer: you must implement via two clicks.

Actual answer: Here is a jQuery-free implementation of double-tap for mobile safari which only requires one line of code (to enable dblclick event):

https://gist.github.com/2927073

In addition, you will likely need to disable mobile Safari's default zoom with this meta tag:

<meta name="viewport" content="width=device-width,user-scalable=no" />

edited May 23 '17 at 11:53

Community

1
1

answered Jun 13 '12 at 23:17

mckamey

17,359
16
83
116

1

posting a link to an offsite code is not an acceptable answer – gman Dec 27 '19 at 03:07
1

It was a fine answer in 2012. – mckamey Dec 28 '19 at 04:56

Marko Novakovic · Answer 2 · 2014-07-25T09:30:40.383

If you want to have working double click both on browser and IOS platform, you should have the following code:

jQuery.event.special.dblclick = {
    setup: function(data, namespaces) {
        var agent = navigator.userAgent.toLowerCase();
        if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) {
            var elem = this,
                $elem = jQuery(elem);
            $elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler);
        } else {
            var elem = this,
                $elem = jQuery(elem);
            $elem.bind('click.dblclick', jQuery.event.special.dblclick.handler);
        }
    },
    teardown: function(namespaces) {
        var agent = navigator.userAgent.toLowerCase();
        if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) {
            var elem = this,
                $elem = jQuery(elem);
            $elem.unbind('touchend.dblclick');
        } else {
            var elem = this,
                $elem = jQuery(elem);
            $elem.unbind('click.dblclick', jQuery.event.special.dblclick.handler);
        }
    },
    handler: function(event) {
        var elem = event.target,
            $elem = jQuery(elem),
            lastTouch = $elem.data('lastTouch') || 0,
            now = new Date().getTime();
        var delta = now - lastTouch;
        if (delta > 20 && delta < 500) {
            $elem.data('lastTouch', 0);
            $elem.trigger('dblclick');
        } else {
            $elem.data('lastTouch', now);
        }
    }
};

Try it here:

http://jsfiddle.net/UXRF8/

score 0 · Answer 3 · edited Oct 11 '12 at 08:36

Override dblclick event and use bind, live, on, delegate like for any other event:

jQuery.event.special.dblclick = {
    setup: function(data, namespaces) {
        var elem = this,
            $elem = jQuery(elem);
        $elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this,
            $elem = jQuery(elem);
        $elem.unbind('touchend.dblclick');
    },

    handler: function(event) {
        var elem = event.target,
            $elem = jQuery(elem),
            lastTouch = $elem.data('lastTouch') || 0,
            now = new Date().getTime();

        var delta = now - lastTouch;
        if(delta > 20 && delta<500){
            $elem.data('lastTouch', 0);
            $elem.trigger('dblclick');
        }else
            $elem.data('lastTouch', now);
    }
};

Double tap on mobile safari

3 Answers3

Linked