2012-03-15 49 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">

這將禁用雙擊縮放,所以瀏覽器不等待檢測雙擊。無需打擾點按事件。可悲的是,它只能在最近的瀏覽器中使用。