Phx-hook applied to children of the expected element

Phoenix Forum Questions / Help
, ,
1

I have an element with phx-hook="MouseClick" and in app.js I have

Hooks.MouseClick = {
	mounted()
	{
		this.el.addEventListener("click", handleClick);
	}
}

handleClick is imported from a JS file with a line like:

import handleClick from "./click_handling"

the problem is that it looks like all children of the element receive this addEventListener() and then the handler receives wrong element in the event. Is it something expected? Or a bug? Or I am doing something obviously wrong here?

2

Yes it’s expected. Look up “event bubbling” and you will find lots!

You can always get the element the handler was attached to with event.currentTarget instead of event.target. If you don’t want the child elements to be clickable, you would have to add a click handler to the most outer one then call e.stopPropagation() in its callback.

1 Like
3

Well – FWIW – if I don’t use phx-hook but rather onclick on the same element, the problem disappears and I can confirm in browser dev tools that there are no listeners on children elements in this case. Only on the element I want it to be attached to, just as I would expect. Thus I am still not convinced that the behaviour I experience is caused by “event bubbling”. Or is attaching the handler via onclick vs phx-hook so fundamentally different?

That’s exactly what I thought to be doing. Although I routinely use stopImmediatePropagation() rather than stopPropagation(). The problem is that inner/children elements get the listener attached to them so they get it first when user clicks.

So – once more – whjen using phx-hook I see the listener attached to children elements and that explains why I get what I get. When using direct onclick on the very same outer element, I see this listener not attached to children elements, only to the outer element I attached it to.

P. S. Yes, using currentTarget gives the expected element but I’d still want to understand why children get the listener attached in one case and not in the other.

4

UPDATE:

Seems that it is. I found multiple examples where using addEventListener causes the same situation. One example here:

and differences explained: