How to know if an event is still bubbling?

Question

I have an SVG element with some nested elements. I have attached a mouseout handler to the SVG element. When I press the mouse in the middle of the SVG element and move it out of the SVG element, I get the following list of events:

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

This means the mouse has first left the path, than it has left the three concentric circles and finally it leaves the SVG element. I am just interested in the last event, which affects the element, who has the handler attached. The SVG element gets all the other events, because they bubble to the SVG element.

How can I know, if an event has been bubbled? How can I ignore those events, which do not affect the element, which has the handler attached?

[More information here](https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property) — Andy, Dec 07 '17 at 10:04

Suren Srapyan · Answer 1 · 2017-12-07T10:29:38.097

4

You can use event.target property to see actually which elements was triggered the event.

$('#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>

edited Dec 07 '17 at 10:29

answered Dec 07 '17 at 10:02

Suren Srapyan

66,568
14
114
112

How to compare elements? – ceving Dec 07 '17 at 10:29
You can give them ids for example and compare them – Suren Srapyan Dec 07 '17 at 10:29

score 0 · Accepted Answer · answered Dec 07 '17 at 12:09

It seems to be necessary to check, if target is the same as currentTarget. The answer to another question claims, that this can be done with ===. So I use now the following condition in my mouseout handler, to skip the situations, when the event is still bubbling:

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

How to know if an event is still bubbling?

2 Answers2