Javascript 从鼠标悬停回调添加单击事件

在下面的示例中，当用户将鼠标悬停在svg#test2上时，应该会出现第二个rect（#rect2）。当用户单击#rect2时，应触发一个单击事件。第一种方法按预期工作，但在第二个示例中，单击#rect2会触发mouseover事件，而不是click事件。有人能解释为什么会这样吗

请注意，如果mouseover更改为mouseenter，或者在mouseover事件中调用stopProgation，则第二个示例不起作用。我真的不明白为什么这些方法能解决这个问题

SVG：

方法1（工程）

d3.选择（“#test2”）
.append（'rect'）
.attr（'id'，'rect1'））
.attr（'可见性'，'隐藏'）
.attr（'height'，'50%”）
.attr（'width'，'50%”）
.on（'单击'，函数（））{
警报（“点击”）；
});
d3.选择（“#test2”）
.on（'mouseover'，function（）{
console.log（'mouseover'）；
d3.选择（'rect1'）.attr（'visibility'，'visible'）；
});

方法2（单击事件未触发）：

d3.选择（“#test2”）
.on（'mouseover'，function（）{
console.log（'mouseover'）；
d3.选择（本）
.append（'rect'）
.attr（'height'，'50%'）。attr（'width'，'50%'））
.on（'单击'，函数（））{
警报（“点击”）；
});
});

---

关于为什么后者不起作用，或者为什么它与mouseenter/stopPropagation一起起作用，您有什么想法吗？

为什么每次触发mouseover事件时都要添加事件侦听器？据我所知，您可能不会。也就是说，就我所见，第二个例子应该仍然“有效”，即使它很奇怪。我只是想弄明白它为什么会这样。