Javascript 将元素向前移动而不中断事件

我正在尝试修复我正在处理的一些事件代码。在这种情况下，我需要能够订阅

svg:circle

上的

单击事件。但是，还需要在
mousedown
上将圆移动到z索引的顶部，以便可以将该元素拖动到其他元素的顶部

这样做的方法是将元素从DOM中取出，并使用我使用的helper函数将其重新插入到正确的位置。这样做的问题是，事件链似乎已断开，将元素从dom中取出，从而阻止
单击
事件触发

我想知道是否有人能想出一个更好的方法来做到这一点，这将确保
单击
正确触发，但仍然允许在拖动生命周期的某个地方更改z索引

这个小示例显示了z索引是如何更改的，但是单击事件不会在控制台中触发。一旦元素位于顶部，再次单击该元素将正确触发单击


d3.选择全部（“圆圈”）
.on（“mousedown”，function（）{
d3.选择（this）.moveToFront（）；
})
.on（“单击”，函数（）{
var fill=d3.选择（此）.style（“填充”）；
log（“您单击：+fill”）；
});
d3.selection.prototype.moveToFront=函数（）{
返回此值。每个（函数（）{
this.parentNode.appendChild（this）；
});
};
.red{
填充物：红色；
}
蓝先生{
填充：蓝色；
}
格林先生{
填充：绿色；
}
我设法想出了一个有点古怪的想法，这似乎是可行的，尽管我有点担心DOM中有很多元素时的性能

其基本思想是，不将选择（在
mousedown
上）移动到顶部，而是将其他所有内容（类型相同，在本例中为
svg:circle
）移动到鼠标落下的元素后面


d3.选择全部（“圆圈”）
.on（“mousedown”，function（）{
var=这个；
d3.选择（此.parentNode）
.selectAll（“圆圈”）
.filter（函数（）{返回此！==that；}）
.向后移动（那）；
})
.on（“单击”，函数（）{
var fill=d3.选择（此）.style（“填充”）；
log（“您单击：+fill”）；
});
d3.selection.prototype.moveToFront=函数（）{
返回此值。每个（函数（）{
this.parentNode.appendChild（this）；
});
};
d3.selection.prototype.moveBehind=函数（元素）{
返回此.each（函数（）{
this.parentNode.insertBefore（this，元素）；
});
};
.red{
填充物：红色；
}
蓝先生{
填充：蓝色；
}
格林先生{
填充：绿色；
}
我想知道问题是否出在
d3
上，所以我用纯JS编写了相应的代码，并在Chrome上得到了与
d3
完全相同的结果。我可以用
mouseup
替换
click
，并将其与
mousedown
元素进行比较，就像在我的评论中一样。您在评论中表示，由于其他项目限制，在您的情况下，此解决方案不可能实现。我想我无论如何都会发布我的解决方案，因为有人提到FF和IE的行为是不同的


const circles=Array.from（document.getElementsByTagName（'circle'）；
让老鼠下山；
for（让圆中的圆）{
circle.addEventListener（'mousedown'，（e）=>{
mousedown=e.target；
e、 target.parentNode.appendChild（即target）；
}，假）；
圆圈.addEventListener（'mouseup'，（e）=>{
if（mousedown==e.target）{
log（'您单击：'+window.getComputedStyle（e.target.fill））；
}
mousedown=null；
}，假）；
}
.red{
填充物：红色；
}
蓝先生{
填充：蓝色；
}
格林先生{
填充：绿色；
}

充电到v4并使用
selection.raise（）
和
selection.lower（）
@GerardoFurtado如果这项工作需要，我希望您添加一个答案，尽管此时我不幸需要使用D3的v3找到一个解决方案。然而，看看加薪代码，我似乎也会遇到同样的问题——现在写起来很复杂，因为我在手机上，但看看我写的这个文档，最后的小提琴使用了“lower”和“raise”：。不幸的是，这是v4…@GerardoFurtado我已经修改了你的JSFIDLE（我不能使用mouseover，因为我需要支持触摸），它有完全相同的问题。你能把
点击
切换到
mouseup
并检查
mousedown
是否是同一个元素吗？值得添加答案，以防对其他人有帮助，所以我会给你一个投票。除非有人有更好的D3答案，否则必须接受答案作为解决方案。