如何在d3中停止Angular处理click事件

Question

我有一个角度应用程序,其中单击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文档甚至有我只是没有意识到它的答案

在拖动手势期间,会阻止某些浏览器默认行为(例如文本选择).为了允许拖动链接,阻止了紧跟非空拖动手势的单击事件的默认行为.在可拖动元素上注册您自己的单击侦听器时,您可以检查单击事件是否被抑制,如下所示:

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

在经过角的$event从ng-click让我检查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>