有没有办法消除移动触摸设备上的点击滞后?

在移动设备(iPad,Galaxy Tab)上查看网站时,点击某个元素(常规链接或使用javascript / jquery进行点击的任何其他元素)总会有滞后现象。

在网上阅读时,我发现浏览器使用touchstart后跟touchend事件,然后触发常规的点击事件。 有没有一种方法来获得更敏感的点击并消除延迟的点击事件? 也许通过使用JavaScript,或其他?

Solutions Collecting From Web of "有没有办法消除移动触摸设备上的点击滞后?"

如果你正在编写一个网页你自己,你可以注册一个touchstart和touchend的监听器,并直接从触摸端直接触发onclick代码,没有任何延迟。

如果您不处理触摸事件,则浏览器会向该元素发送(有一些延迟)点击事件

从谷歌看这个描述来创build“快速button”: http : //code.google.com/intl/de-DE/mobile/articles/fast_buttons.html

从Matt的库( https://stackoverflow.com/a/9370637/1491212 )改编而来,我自己改编自谷歌代码,我写了一个jQuery插件。

像这样使用: $('mySelector').fastClick(handler);

 (function($){ var clickbuster = { preventGhostClick: function(x, y) { clickbuster.coordinates.push(x, y); window.setTimeout(clickbuster.pop, 2500); }, pop: function() { clickbuster.coordinates.splice(0, 2); }, onClick: function(event) { for (var i = 0; i < clickbuster.coordinates.length; i += 2) { var x = clickbuster.coordinates[i]; var y = clickbuster.coordinates[i + 1]; if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { event.stopPropagation(); event.preventDefault(); } } } }; var methods = { init: function(handler){ return this.each(function() { var $this = $(this), data = $this.data('fastClick'); if(!data){ this.addEventListener('touchstart', methods.handleEvent, false); this.addEventListener('click', methods.handleEvent, false); $this.data('fastClick', { target: $this, handler: handler }); } }); }, handleEvent:function(event) { switch (event.type) { case 'touchstart': $(this).fastClick('onTouchStart',event); break; case 'touchmove': $(this).fastClick('onTouchMove',event); break; case 'touchend': $(this).fastClick('onClick',event); break; case 'click': $(this).fastClick('onClick',event); break; } }, onTouchStart: function(event) { event.stopPropagation(); this[0].addEventListener('touchend', methods.handleEvent, false); var _this = this; document.body.addEventListener('touchmove', function(event){ methods.handleEvent.apply(_this,[event]); }, false); $(this).data('fastClick').startX = event.touches[0].clientX; $(this).data('fastClick').startY = event.touches[0].clientY; }, onTouchMove: function(event) { if (Math.abs(event.touches[0].clientX - this.data('fastClick').startX) > 10 || Math.abs(event.touches[0].clientY - this.data('fastClick').startY) > 10) { this.fastClick('reset'); } }, onClick: function(event) { event.stopPropagation(); $(this).fastClick('reset'); $(this).data('fastClick').handler.call(this,event); if (event.type == 'touchend') { clickbuster.preventGhostClick($(this).data('fastClick').startX, $(this).data('fastClick').startY); } }, reset: function() { this[0].removeEventListener('touchend', methods.handleEvent, false); document.body.removeEventListener('touchmove', methods.handleEvent, false); } } $.fn.fastClick = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if ( typeof method === 'object' || typeof method === 'function' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.hScroll'); } } clickbuster.coordinates = []; document.addEventListener('click', clickbuster.onClick, true); })(jQuery); 

如果设备支持触摸像modernizer,我使用检测。 如果它是一个触摸设备,我填写一个名为touchClick的var,在结果上使用'click''touchend'选项。 在jQuery中我只是打电话给:

  $('element').on(touchClick, function(e){ //do something }); 

它有一个非常小的足迹。