当使用ngTouch时，为什么会触发多个点击事件？

Question

我正在使用Angular构建移动Web应用程序，并尝试整合ngTouch（angular-touch）模块以加速移动设备上的点击事件。

这是没有使用ngTouch的应用程序：http://lukasolson.github.io/n-spade-cards/ng-click/ 这是使用ngTouch的应用程序：http://lukasolson.github.io/n-spade-cards/ng-touch/ 我在iPhone 5上使用Safari进行测试。

没有ngTouch模块，一切正常，但有一个恼人的300毫秒点击延迟。

然而，使用ngTouch模块后，每次我在屏幕上轻触时，Web应用程序都会认为我轻触了两次，破坏了我的应用程序功能。

我是否错误地包含了ngTouch模块？为什么会触发多个点击事件？

- Lukas

---

它可能会触发 点击 事件和 触摸 事件吗？ - Foreign Object

也许吧...但是为什么呢？就我所知，我使用得很正确。 - Lukas

你最近有在查看 https://github.com/angular/angular.js/issues/6251 吗？ - coma

@coma 是的。感谢您创建这个问题。现在我意识到不仅仅是我自己的问题。 - Lukas

Answer 1

来源: http://jsfiddle.net/coma/2hWWa/
在您的iPhone上测试: http://jsfiddle.net/coma/2hWWa/embedded/result/

angular.module('app').directive('myclick', function() {

    return function(scope, element, attrs) {

        element.bind('touchstart click', function(event) {

            event.preventDefault();
            event.stopPropagation();

            scope.$apply(attrs['myclick']);
        });
    };
});

现在你可以：

<a myclick="aFunction()">click it!</a>

由于"stopPropagation"将阻止点击事件的发生，因此它不会“重复”点击，只有touchstart将触发。

请测试一下并告诉我是否有用。

顺便说一句，如果您不关心缩放，则可以使用以下方法避免延迟：

http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

我过去常常为“应用程序”添加此功能。

更新

https://github.com/angular/angular.js/issues/6251

- coma

---

嗯... 我确实稍微研究了一下fastclick，但我真的想知道这是Angular的一个bug还是我的操作有问题。你的答案提供了一个替代方案，但没有告诉我我哪里做错了。 - Lukas

让我更改名称以避免与 https://github.com/ftlabs/fastclick 混淆。是的，我认为这是一个错误，这就是为什么我刚刚为它打开了一个工单 https://github.com/angular/angular.js/issues/6251 - coma

@coma：当我使用这种技术时，单击事件失效了。可能出了什么问题？ - Ali Saberi

@AliSaberi，不知道，试着用codepen/jsfiddle来检查一下。 - coma