删除适用于 android 的 webapps 的 onclick 延迟答案

【问题标题】：removing the onclick delay for webapps for android删除适用于 android 的 webapps 的 onclick 延迟
【发布时间】：2012-04-01 02:17:59
【问题描述】：

您好，我正在构建一个 web 应用程序。为了消除 onclick 延迟，我发现了这个脚本 http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone 代码基本上是-

function NoClickDelay(el) {
this.element = el;
if( 'ontouchstart' in window ){  
    console.log("===================touch supported :P")
    this.element.addEventListener('touchstart', this.handleEvent, false);
}                              
}

NoClickDelay.prototype = {
handleEvent: function(e) {
     switch(e.type) {
        case 'touchstart': this.onTouchStart(e); break;
        case 'touchmove': this.onTouchMove(e); break;
        case 'touchend': this.onTouchEnd(e); break;
    }
},

onTouchStart: function(e) {

    //e.preventDefault(); //removed to let the page scroll
    this.moved = false;

    this.element.addEventListener('touchmove', this, false);
    this.element.addEventListener('touchend', this, false);
},

onTouchMove: function(e) {

    this.moved = true;
},

onTouchEnd: function(e) {
    this.element.removeEventListener('touchmove', this, false);
    this.element.removeEventListener('touchend', this, false);

    if( !this.moved ) {
        // Place your code here or use the click simulation below
        var theTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
        if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;

        var theEvent = document.createEvent('MouseEvents');
        theEvent.initEvent('click', true, true);
        theTarget.dispatchEvent(theEvent);
    }
}
};

我的问题是这适用于 iphone/ipad 但不适用于 Android。是什么阻止它在 android 中工作，我该怎么做才能在 android 和其他设备中实现类似的行为？？？请帮忙。

【问题讨论】：

标签： javascript android touch touch-event

【解决方案1】：

我们遇到了同样的问题，但采用了稍微不同的方法解决了它。我们能够为 iPhone 和 Android 修复它。点击将立即触发，延迟事件将被忽略。也许你可以使用它：

https://github.com/cargomedia/jquery.touchToClick

【讨论】：

+1 我们遇到了同样的问题。在我们的例子中，在 iPhone 上设置光标不再起作用。你知道这个问题是否也能解决吗？
想起来很容易。就试一试吧。实现起来真的很简单
很棒的实现 Marcel。做它应该做的，只是一个问题。不适用于可排序的 jquery。我用它来对列表中的项目进行排序，我认为这个插件把这个功能吹走了。

【解决方案2】：

在您的链接中，有人评论了 Android 解决方案（我没有尝试过）：

Android 的 onClicks 也有同样的问题。你的demo不能在Android上运行，除非我在下面注释掉window.Touch，所以我相信DOM属性只在iOS上可见。

function NoClickDelay(el) {
this.element = el;
// if (window.Touch) not available on android
this.element.addEventListener(‘touchstart’, this, false);
}

通过上述更改，Android 获得非延迟触摸事件！

【讨论】：

是的。真正的问题是添加 e = e.originalEvent;在 onTouchEnd 函数中。 :)

【解决方案3】：

touchToClick 或 fastclick 在我的情况下不起作用。

我在 onclick 事件中有很多代码，实际上我正在使用 Tappy：

onClick event in android webview too slow

【讨论】：

【解决方案4】：

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

这会禁用双击缩放，因此浏览器不会等待检测双击。无需担心点击事件。遗憾的是，它仅适用于最近的浏览器。

【讨论】：