2012-03-15 52 views
2

嗨,我正在构建一个web应用程序。要去除 http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone 的onclick延迟,我发现这个脚本的代码是bascically-删除android的web应用程序的onclick延迟

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和其他设备?请帮忙。

回答

1

在你的链接有一个人评论了关于Android解决方案(我还没有尝试):

Android已经与laggy onClicks同样的问题。你的演示在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获得非laggy触摸事件!

+0

是的。真正的问题是增加e = e.originalEvent;在onTouchEnd函数中使用 。 :) – ghostCoder 2012-03-28 11:22:33

3

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

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

+0

+1我们有同样的问题。在我们的案例中,设置iPhone上的光标不再工作。你知道这个问题是否会被解决吗? – Besi 2012-08-15 06:32:09

+0

想那么容易。去尝试一下。这是很容易实现 – 2012-08-16 13:21:36

+0

真棒实施马塞尔。究竟它应该做什么,只是一个问题。不能用jquery排序。我使用它来对列表中的项目进行排序,并且我认为这个插件会将该功能带走。 – weexpectedTHIS 2012-08-28 21:25:43

0

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

这将禁用双击缩放,所以浏览器不等待检测双击。无需打扰点按事件。可悲的是,它只能在最近的浏览器中使用。