Question

如何从iOS上的移动Safari中删除点击/点击延迟？

我已经在事件监听器上摆弄了很多东西，并且使用了许多不同的脚本（例如Lightning Touch）来获得快乐。有一些解决方案可行，但是这些类型的脚本会强制您将目标元素编码到DOM上的每个链接。不幸的是，这可能导致一些快速和一些缓慢的过渡，这对我不起作用。

Answer 1

我终于在不知疲倦的搜索之后找到了我的速度问题的答案，它以FastClick的形式出现（this thread详细介绍，以及来自评论的一些调整其他用户）。

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

onLoad Listener： <body onLoad="initFastButtons();">

Span Wrap：

<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);
         };
//========================================================

Answer 2

这对我有用。每当将新页面添加到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);
});

Answer 3

Ben Howdle最近创建了一个开源项目Touche.js，它以一种相当简单和优雅的方式解决了这个问题。对于寻找这个问题的解决方案的人来说，可能值得一看。

Answer 4

我无法直接向MikeZ推荐发表评论。

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

我没有在gonClick（）中调用event.preventDefault();，而是还要调用event.stopImmediatePropagation();

否则，当您点击的元素顶部打开动态元素（如面板）时，您可能会遇到麻烦。

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

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();
        }
    }
};

速度修复：如何删除jQuery Mobile Apps中的300ms延迟

4 个答案: