带有 mousedown 事件处理程序的 AngularJS 指令，但单击事件永远不会触发

Posted 2023-05-07

【中文标题】带有 mousedown 事件处理程序的 AngularJS 指令，但单击事件永远不会触发

【英文标题】：AngularJS directive with mousedown event handler but click event never fires

【发布时间】：2014-08-15 03:48:16

【问题描述】：

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

它在桌面 Chrome 和 IE、ios 7 和 6 中的 iOS 中运行良好，但在 android 4.4.2 中它显示转换但点击事件从不触发以实际导航。

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

我将指令应用到 div 和带有 ng-click 指令的 div - 两者都不起作用。

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

这是一个包含在链接中的示例 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;
]);

【问题讨论】：

如果明天还没有解决，我会看看。不好说的一件事是，我发现 ngTouch 导致的问题比它解决的问题多，除非你花时间解决它自己的怪癖。

【参考方案1】：

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

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

您的示例中缺少某些元素，或者您的操作方式与我不同，因此我不会对此进行特别评论（我倾向于明确使用 ngClick）。

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

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

【参考方案2】：

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

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