Wrong mouse event targets with d3.js v6

hello, i couldn’t find any specific d3 module for events or mouse but i suppose this belong here. The changes with d3 events in v6 are creating some problems, i noticed this change of behavior which i think is an issue.

I have a table with images contained in the cells <td><img> and a callback on mouseover.

d3 v5.16

    tbody.selectAll("td:nth-child(2)")
        .on("mouseover", function () {  console.log(this, d3.event); // my handler follows...
         });

I get an event fired on the td item consistently. If the mouse goes over the image, i still get a target td with fromElement = img.

d3 v6.0

Now if i rewrite with the new API:

    tbody.selectAll("td:nth-child(2)")
        .on("mouseover", (event, d) => { console.log('mouseover', event.target); })

I would now get events fired both on td and img which does not seem logic and requires extra code to get around this problem. I only declared an event handler on td, why do i get events on img? I expect it to be as before, only fire on td. If the mouse is over the image the event should have fromElement = img.

Does it make sense?

[Fil]

I realize now you’re mentioning event.target; you could probably use event.currentTarget instead (I’ve updated the notebook). ((But again, this has not changed from D3@5.))

There are two events because when mouseover happens on IMG it bubbles up.

[herrvigg]

I realize now you’re mentioning event.target; you could probably use event.currentTarget instead

Right. If you’re looking for a replacement for this in an arrow function, you want event.currentTarget, not event.target. The latter is different when an event bubbles, but event.currentTarget always refers to the element you’re listening to.

Yes! It works with event.currentTarget, awesome! I wasn’t aware of this difference, many thanks!!

Also, you want to use a mouseenter event if you just want to listen to the td and not its descendants.

In my case i want mouseover. Now it’s solved, everything works with v6 as before, that’s great!