Question

我有一个带有一些嵌套元素的SVG元素。我已经将mouseout处理程序附加到SVG元素。当我在SVG元素的中间按下鼠标并将其移出SVG元素时，我得到以下事件列表：

down
out <path ...>
out <circle r="39.5">
out <circle r="40">
out <circle r="49.5">
out <svg ...>
up

这意味着鼠标首先离开路径，而不是离开三个同心圆，最后离开SVG元素。我只对最后一个影响元素的事件感兴趣，该事件附加了处理程序。 SVG元素获取所有其他事件，因为它们冒泡到SVG元素。

如果事件被冒泡，我怎么知道？如何忽略那些不影响元素的事件，这些事件附加了处理程序？

Answer 1

您可以使用event.target属性来查看实际触发了哪些元素。

$('#myDiv').on('click', function(e) {
  console.log(e.target.id);
});

#myDiv {
  background-color: red;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='myDiv'>
  <button id='myButton'>Click me</button>
</div>

Answer 2

如果target与currentTarget相同，则似乎需要检查。 answer到另一个question声称可以使用===完成此操作。所以我现在在我的mouseout处理程序中使用以下条件，当事件仍在冒泡时跳过这些情况：

svg.onmouseout = function (event) {
  if (event.target === event.currentTarget) {
    // Do what needs to be done after the mouse leaves the SVG element.
  }
};

如何知道一个事件是否还在冒泡？

2 个答案: