angularjs - 如何停止 Angular 处理 d3 中的点击事件

Question

我有一个 Angular 应用程序，其中单击 SVG 元素会更改其状态(在附加的代码片段中在填充颜色之间切换)

我还连接了 d3 以拖动同一对象。

d3 文档指出，它们在非空拖动后停止单击事件，但无论我是否尝试停止传播，ng-click 仍然会拾取单击事件。

是否可以仅在没有 d3 拖动的情况下触发 ng-click？

在附加的代码片段中，我的期望是，如果您只需单击蓝色矩形，它将切换为黄色(然后再次返回)，但如果您拖动它，则颜色不会改变。我发现在拖动结束时颜色发生变化。

var myApp = angular.module('app', []);

myApp.controller('ctrl', function ($scope){
  //clicking rectangle toggles yellow background
  $scope.isYellow = false; 
  
  var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
          var el = d3.select(this);
          var h = el.attr("height");
          var w = el.attr("width");
          var x = d3.event.x - (w/2);
          var y = d3.event.y - (h/2);
          el.attr("transform", "translate(" + [ x,y ] + ")")

          //try to stop the event from propagating
          d3.event.sourceEvent.stopPropagation();
          d3.event.preventDefault();
        });
  
  d3.select('rect').call(drag);
});

svg {background:red}
rect {fill:blue}
.yellow {fill: yellow}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

  <div ng-app="app">
    <svg width=250 height=250 ng-controller="ctrl">
      <rect 
            ng-class="{yellow : isYellow}"
            ng-click="isYellow = !isYellow"
            x="10" y="10" width="30" height="30">

      </rect>
    </svg>
  </div>

Answer 1

就像经常发生的情况一样，仅仅在一个峰值中提出问题就足以让我的潜意识发挥作用。

d3 docs甚至有答案我只是没有意识到

During a drag gesture, some browser default behaviors (such as text selection) are prevented. To allow the dragging of links, the default behavior for a click event that immediately follows a non-empty drag gesture is prevented. When registering your own click listener on draggable elements, you can check whether the click event was suppressed as follows:

selection.on("click", function() { if (d3.event.defaultPrevented) return; // click suppressed console.log("clicked!"); });

从ng-click传递Angular的$event时，我可以检查isDefaultPrevented，这在d3拖动后是正确的，允许修改解决方案正如这里的代码片段

var myApp = angular.module('app', []);

myApp.controller('ctrl', function ($scope){
  //clicking rectangle toggles yellow background
  $scope.isYellow = false; 
  
  $scope.toggleColour = function($event) {
    if ($event.isDefaultPrevented()) {
     return;
    }
    $scope.isYellow = !$scope.isYellow;  
  };

  var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
          var el = d3.select(this);
          var h = el.attr("height");
          var w = el.attr("width");
          var x = d3.event.x - (w/2);
          var y = d3.event.y - (h/2);
          el.attr("transform", "translate(" + [ x,y ] + ")")

          //try to stop the event from propagating
          d3.event.sourceEvent.stopPropagation();
          d3.event.preventDefault();
        });
  
  d3.select('rect').call(drag);
});

svg {background:red}
rect {fill:blue}
.yellow {fill: yellow}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

  <div ng-app="app">
    <svg width=250 height=250 ng-controller="ctrl">
      <rect 
            ng-class="{yellow : isYellow}"
            ng-click="toggleColour($event)"
            x="10" y="10" width="30" height="30">

      </rect>
    </svg>
  </div>