d3单击事件在为拖动事件附加克隆元素之后不起作用

Question

使用"d3"："3.5.17"；角度

const dragEvent = {
dragstarted: function(d) {
console.log(`drag start`);
d3.event.sourceEvent.stopPropagation();
const node = d3.select(this.parentNode).node();
const clonedG = node.cloneNode(true);
d3.select(clonedG).attr('id', 'dragging').classed('dragging', true).attr('opacity', 0.7);
// problem
node.parentNode.append(clonedG);
},
dragged: function(d) {
console.log(`drag`);
d3.select('#dragging').attr('transform', `translate(${(d.x = d3.event.x)},${(d.y = d3.event.y)})`);
},
dragended: (d) => {
// todo: drop call
console.log(`dragended`);
const dragging = document.getElementById('dragging');
dragging.parentNode.removeChild(dragging);
}
};
const drag = d3.behavior.drag()
.origin(function(d) {
d = {x: 0, y: 0};
return d;
})
.on('dragstart', dragEvent.dragstarted)
.on('drag', dragEvent.dragged)
.on('dragend', dragEvent.dragended);
d3.selectAll('.select-rect')
.datum({x: 0, y: 0})
.call(drag)
.on('click', function () {
console.log(`click`);
if (d3.event.defaultPrevented) { return; }
console.log(`clicked`);
});

首先我很抱歉
我的英语不好。

我想拖动一个新元素，并在拖动结束时将其删除
但是我对这条线路有一些问题：node.parentNode.append(clonedG);
添加克隆的元素后，单击事件不起作用。

我错了吗
还是在拖动结束事件后再次单击事件句柄
有人能帮我吗？

Answer 1

我解决了这个问题。

let isClick = false;
const dragEvent = {
dragstarted: function(d) {
console.log(`drag start`);
d3.event.sourceEvent.stopPropagation();
},
dragged: function(d) {
if (!isClick) {
isClick = true;
const node = d3.select(this.parentNode).node();
const clonedG = node.cloneNode(true);
d3.select(clonedG).attr('id', 'dragging').classed('dragging', true).attr('opacity', 0.7);
// problem
node.parentNode.append(clonedG);
}
console.log(`drag`);
// tslint:disable-next-line:no-shadowed-variable
const dragging = d3.select('#dragging');
console.log(`dragging`, dragging);
if (dragging) {
dragging.attr('transform', `translate(${(d.x = d3.event.x)},${(d.y = d3.event.y)})`);
}
},
dragended: (d) => {
// todo: drop call
console.log(`dragended`);
isClick = false;
const dragging = document.getElementById('dragging');
if (dragging) {
dragging.parentNode.removeChild(dragging);
}
}
};

更改了dragstarted部分
克隆元素代码移到了dragsstarted部分
，但我不知道有什么不同
祝福开发人员！