Question

我正在使用d3选择矩形。我正在尝试同时在矩形上触发拖动结束和mouseup事件。看起来好像拖动事件阻止了mouseup事件。（它们不会阻止鼠标悬停事件）我已经将鼠标和拖动事件绑定到矩形。当我单击矩形时，不会触发mouseup事件，仅触发拖动端。我尝试了event.stopPropagation（）和preventDefault（）的不同组合来控制触发哪些事件。我也尝试将拖动事件设置为null。这些都不起作用。如何使拖动端和mouseup在mouseup上启动？

var target = d3.select('#test');
target.on('mouseup', (d) => alert('mouseup'))
 .call(d3.drag()
   .on("start", function () {
     console.log('start')
   })
   .on("drag", function () {
     console.log('drag');
   }).on("end", function () {
     alert('end');
     //d3.select(window).on('click.drag', null);
   })
);

<div id='test' />

#test { background:red; position:absolute; height:40px; width:40px; }

此功能在D3 v3中有效，但在v4中无效

编辑： 澄清一下，我的问题是，拖动事件触发时，页面上的mouseup事件（以及所有元素）均被禁用。当您从一种形状拖到另一种形状时，我想确定目标元素（因此需要mouseup）。

Answer 1

以我的经验，您应该只能够将鼠标按下逻辑添加到拖动开始事件中。您是否尝试过这种情况？如果这是使用鼠标的更复杂的操作，并且不适用于拖动启动事件，请添加详细信息。

Answer 2

当您单击一个元素并拖动到另一个元素时，我想检测第二个元素是什么。拖动对象时，Mouseup不会触发，但是mouseover和mouseout会触发。我使用这些函数来设置mouseover_obj变量。这样，在拖动后，当执行拖动结束事件时，就可以访问该对象。如果不为null，则其值为鼠标悬停时的形状。

以下是一些代码： JsFiddle for D3 Mouseup while Drag

var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
  .data([0, 2, 3])
  .enter().append('rect')
  .attr('x', function(x) { return +x * 0; })
  .attr('y', function(y) {  return +y * 120; })
  .attr('width', function() { return 100; })
  .attr('height', function() { return 100; })
  .attr('fill', function(x) {  if(x == 0){return'red';}else return 'blue'; });


rect.on("mouseover", (d) => {this.mouseover_node = d})
  .on("mouseout", (d) => {this.mouseover_node = null})
  .call(d3.drag()
    .on("start", function () {
        console.log('start');
        return false;
        })
    .on("drag", function () {
        console.log('drag');
        })
    .on("end",  (sourceElement,index,svgItems) => {
        console.log('end drag with mouseover: ' + this.mouseover_node);
        })
);

D3拖放事件

2 个答案: