角度 - 处理 ng 点击，除非该点击变成拖动答案

【问题标题】：angular - handle ng click, except when that click becomes a drag角度 - 处理 ng 点击，除非该点击变成拖动
【发布时间】：2016-10-03 16:42:29
【问题描述】：

期望的行为是用户可以点击这个对象（所以它有一个ng-click），但如果点击在 mouseup 之前变成拖动，那么ng-click 处理程序不会被触发。

给定我传递给处理程序的$event 对象，也许一种方法可以检测单击是否是拖动，并在处理程序中检查是否有条件？

（动机是可点击对象有文本，我希望该文本能够在不触发点击的情况下突出显示和复制）

使用角度版本 1.5.6

【问题讨论】：

您可能必须使用ng-mousedown、ng-mouseup 和ng-mousemove 比较x 和y 偏移量并设置在ng-click 事件处理程序中检查的标志。

标签： javascript angularjs highlight drag angularjs-ng-click

【解决方案1】：

我认为您可以同时设置 ng-mousedown 和 ng-mouseup 处理程序。当 ng-mousedown 触发时，您可以保存坐标，然后使用 ng-mouseup 事件中的新坐标计算差异。如果差异很小 - 这是一次点击，您可以运行 ng-click 功能。

【讨论】：

mouseup 可能不会出现在元素上这一事实怎么办？此外，您可以对其进行 mousedown，然后对其进行 mouseup，然后对其进行 mousedown，然后再次对其进行 mouseup，因此仅在 mousedown 上设置一个变量并在 mouseup 上检查该变量是不够的。

【解决方案2】：

这就是我管理它的方式 - 在我的控制器中我有这个：

        $scope.dragging = false;
        $scope.mouseIsDown = false;
        $scope.mouseDown = function(event){
            //console.log("mouse down");
            $scope.mouseIsDown = true;
            $scope.dragging = false;
        };
        $scope.mouseUp = function(event){
            //console.log("mouse up");
            $scope.mouseIsDown = false;

            if($scope.dragging){
                //console.log("Must have dragged");
                return false;
            }else{
                //handle single click here, since drag didn't happen
            }
        };
        $scope.mouseMove = function(event){
            //console.log("mouse moved");
            $scope.dragging = true;
        };

在我的 HTML 元素中，我设置了这些句柄，尽管我确信这是 Roman 的意思：

        ng-mousedown="mouseDown(event)"
        ng-mouseup  ="mouseUp(event)"
        ng-mousemove="mouseMove(event)"

【讨论】：