我正在使用 d3 来选择矩形。我试图让拖动结束和 mouseup 事件在矩形上触发。看起来拖动事件会阻止 mouseup 事件。 (它们不会阻止鼠标悬停事件)我已经将鼠标向上绑定(bind)并将拖动事件绑定(bind)到矩形。当我单击矩形时,不会触发 mouseup 事件,只会触发拖动端。我尝试了 event.stopPropagation() 和 preventDefault() 的不同组合来控制触发哪些事件。我还尝试将拖动事件设置为空。这些都不起作用。如何让拖动端和 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)。
最佳答案
当您单击一个元素并拖动到另一个元素时,我想检测第二个元素是什么。拖动对象时不会触发 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.js - D3 拖动和 mouseup 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53396051/