双击移动 Safari答案

【问题标题】：Double tap on mobile safari双击移动 Safari
【发布时间】：2012-05-03 22:09:18
【问题描述】：

有没有办法绑定到移动 safari 的双击事件（在一行代码中）？或者，另一种方法是实现它拦截在给定时间内发生的两个单击事件（例如：http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/）？

【问题讨论】：

双标签不是用来缩放的吗？浏览器中是否会触发 2 个点击事件？
用于缩放的相同事件，我想覆盖具体给定情况的行为
对不起，如果我与您的问题无关，但如果您显示网页，您可以在元标记中指定视口设置。您可以在 sn-pspace 的 iwebkit 中看到这一点。

标签： javascript iphone ipad mobile-safari

【解决方案1】：

简答：您必须通过两次点击来实施。

实际答案：这是一个无需 jQuery 的移动 safari 双击实现，只需要一行代码（启用 dblclick 事件）：

https://gist.github.com/2927073

此外，您可能需要使用此元标记disable mobile Safari's default zoom：

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

【讨论】：

发布指向异地代码的链接是不可接受的答案
这是 2012 年的一个很好的答案。

【解决方案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/

【讨论】：

【解决方案3】：

覆盖dblclick 事件并使用bind、live、on、delegate，就像任何其他事件一样：

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

【讨论】：