javascript - モバイルサファリをダブルタップ

Question

モバイルサファリのダブルタップイベント（1行のコード）にバインドする方法はありますか？または、別の方法は、特定の短時間に発生した2つのシングルタップイベントをインターセプトするように実装することです（例：http ：//appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/ ）？

Answer 1

簡単な答え： 2回のクリックで実装する必要があります。

実際の答え：これは、モバイルサファリ用のダブルタップのjQueryフリーの実装であり、（dblclickイベントを有効にするために）1行のコードのみが必要です。

• https://gist.github.com/2927073

さらに、次のメタタグを使用してモバイルSafariのデフォルトのズームを無効にする必要があります。

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

Answer 2

ブラウザとIOSプラットフォームの両方でダブルクリックして作業する場合は、次のコードが必要です。

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);
        }
    }
};

ここで試してみてください：

http://jsfiddle.net/UXRF8/

Answer 3

イベントをオーバーライドし、他のイベントと同様に、、を使用dblclickします。bindliveondelegate

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);
    }
};