具有mousedown事件处理程序的AngularJS指令但是click事件永远不会触发

Question

我创建了一个自定义指令，用于连接mousedown / touchstart和mouseup / touchend事件，这些事件可以向元素添加/删除css3转换（按下/释放效果）。

它适用于桌面Chrome和IE，iOS7和iOS中的iOS，但Android 4.4.2会显示转换，但点击事件永远不会触发实际导航。

我能让它工作的唯一方法是在元素上非常快速地点击/点击。 当使用正常的敲击速度时，几乎就像点击事件被吞下或取消一样。

我将指令应用于div内部和div使用ng-click指令 - 两者都不起作用。

编辑：有一种情况，它在任何浏览器中都不起作用 - 如果div我添加指令也附加了ng-click。 如果我通过添加一个嵌套的div将它添加到DOM中的一个级别并将其应用于该div它可以正常工作。

这是一个包含在链接中的示例div

<a ng-href="#/concept/{{conceptOfDay.id}}">
  <div class="contentBox" touch-tilt>
      <i class="fa fa-2x icon fa-calendar-o"></i>
      <div class="itemTitle">concept of the day</div>
      <div class="itemSubTitle">{{conceptOfDay.title}}</div>
  </div>
</a>

和指令

angular.module('app').directive('touchTilt', ['$document', function ($document) {

    var directive = {
        restrict: 'A',
        link: function (scope, element, attr) {

            function mousedown(event) {
                var translateString = "perspective( 800px ) rotateX( 0deg ) rotateY( 0deg ) translateZ( -30px )";
                element.css('transform', translateString);
                $document.on('touchend mouseup', mouseup);
            }

            function mouseup(event) {
                var idleCss = "perspective( 800px ) rotateX( 0deg ) rotateY( 0deg ) translateZ( 0px )";
                element.css('transform', idleCss);
                $document.off('touchend mouseup', mouseup);
            }

            element.on('touchstart mousedown', mousedown);
            element.click(function () { alert('click event handled'); })
        }
    };
    return directive;
}]);

Answer 1

通常，您在迁移到Android或触摸设备时使用ngTouch模块。 如本文档所述，触摸设备有延迟：

https://docs.angularjs.org/api/ngTouch

你的例子中缺少一些元素，或者你只是做了不同的事情，所以我不会特别评论（我倾向于明确地使用ngClick）。

无论如何，您应该能够在ngTouch中使用ngClick指令来使触摸屏更好地工作。 我有一个类似的问题，包括角度触摸解决了不少。

你没有注意到你包含哪些库，所以如果我是多余的，这就是原因。

Answer 2

在链接函数中，您只是声明了两个处理函数mousedown和mouseup，但是您永远不会将它们设置为触发。 您需要在标记中添加ng-click或将元素绑定到链接函数中的事件侦听器。

// (Inside of link function)
element.bind('mousedown', function(){
    console.log('clicked on document');
  });