速度修正：如何删除jQuery移动应用程序中的300毫秒延迟

如何从iOS移动Safari中删除点击/点击延迟？速度修正：如何删除jQuery移动应用程序中的300毫秒延迟

我已经用事件监听器弄了一会儿，并且使用了一堆不同的脚本（比如Lightning Touch）而没有喜乐。有几个解决方案可以工作，但是这些类型的脚本会强制您将目标元素编码到DOM上的每个链接。这不幸的是可能会导致一些快速和一些缓慢的过渡，这对我不起作用。

来源

2012-11-20 MikeZ

我终于找到了答案，经过不懈搜索我的速度疾苦，它有FastClick的形式（this thread进入非常详细，与来自其他用户的评论一些调整一起）。

合并FastClick.js脚本，添加onLoad侦听器，并在一个范围内包装<body>内容，并且您的应用应该开始感觉更加本地化。

的onLoad监听器：<body onLoad="initFastButtons();">

跨度余音：

<body onLoad="initFastButtons();"> 
    <span id="fastclick"> 

    [...] 

    </span> 
</body>

FastClick.js

//======================================================== FASTCLICK 
     function FastButton(element, handler) { 
      this.element = element; 
      this.handler = handler; 
      element.addEventListener('touchstart', this, false); 
     }; 
     FastButton.prototype.handleEvent = function(event) { 
      switch (event.type) { 
       case 'touchstart': this.onTouchStart(event); break; 
       case 'touchmove': this.onTouchMove(event); break; 
       case 'touchend': this.onClick(event); break; 
       case 'click': this.onClick(event); break; 
      } 
     }; 
     FastButton.prototype.onTouchStart = function(event) { 

event.stopPropagation(); 
      this.element.addEventListener('touchend', this, false); 
      document.body.addEventListener('touchmove', this, false); 
      this.startX = event.touches[0].clientX; 
      this.startY = event.touches[0].clientY; 
isMoving = false; 
     }; 
     FastButton.prototype.onTouchMove = function(event) { 
      if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) { 
       this.reset(); 
      } 
     }; 
     FastButton.prototype.onClick = function(event) { 
      this.reset(); 
      this.handler(event); 
      if(event.type == 'touchend') { 
       preventGhostClick(this.startX, this.startY); 
      } 
     }; 
     FastButton.prototype.reset = function() { 
      this.element.removeEventListener('touchend', this, false); 
      document.body.removeEventListener('touchmove', this, false); 
     }; 
     function preventGhostClick(x, y) { 
      coordinates.push(x, y); 
      window.setTimeout(gpop, 2500); 
     }; 
     function gpop() { 
      coordinates.splice(0, 2); 
     }; 
     function gonClick(event) { 
      for(var i = 0; i < coordinates.length; i += 2) { 
       var x = coordinates[i]; 
       var y = coordinates[i + 1]; 
       if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 
        event.stopPropagation(); 
        event.preventDefault(); 
       } 
      } 
     }; 
     document.addEventListener('click', gonClick, true); 
     var coordinates = []; 
     function initFastButtons() { 
new FastButton(document.getElementById("fastclick"), goSomewhere); 
     }; 
     function goSomewhere() { 
var theTarget = document.elementFromPoint(this.startX, this.startY); 
if(theTarget.nodeType == 3) theTarget = theTarget.parentNode; 

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

来源

2012-11-20 16:12:45 MikeZ

有没有人遇到非JS密集的解决方案？也许使用CSS指针事件：无; ？ – JackMahoney

fastclick **完全**失败，jquery可拖动 – 8DK

这是为我工作。每当一个新的页面被添加到DOM，我们可以快速点击然后附加到所有的链接...

// when new pages are loaded into the DOM via JQM AJAX Nav, apply ko bindings to that page's DOM 
$(document).on('pageinit', '.ui-page', function (event, data) 
{ 
    var activePage = $(event.target).get(0); 
    FastClick.attach(activePage); 
});

来源

2013-05-30 16:28:31 TWilly

Ben Howdle最近创建了一个开源项目Touche.js这在一个相当简单而优雅的方式来解决这个问题。可能值得一看寻找解决这个问题的人。

来源

2013-10-24 14:49:43 Robbie

我无法直接发表评论到MikeZ的建议。

我用它成功了，但不得不做一些额外的tweek，特别是对于Android设备。

而是在gonClick调用event.preventDefault();的（），我也只好打电话event.stopImmediatePropagation();

否则，你可能会遇到麻烦运行尤其是，如果动态元素，如面板，是在元素的顶部打开你点击。

完全gonClick（）方法与MikeZ解决方案一起使用：

function gonClick(event) { 
    for (var i = 0; i < coordinates.length; i += 2) { 
     var x = coordinates[i]; 
     var y = coordinates[i + 1]; 
     if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      event.stopImmediatePropagation(); 
     } 
    } 
};

来源

2013-12-25 16:05:46 Benjamin

速度修正：如何删除jQuery移动应用程序中的300毫秒延迟

回答

相关问题