silverdr
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?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
sodapopcan
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.currentTargetinstead ofevent.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 calle.stopPropagation()in its callback.silverdr
Well – FWIW – if I don’t use
phx-hookbut ratheronclickon 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 viaonclickvsphx-hookso fundamentally different?That’s exactly what I thought to be doing. Although I routinely use
stopImmediatePropagation()rather thanstopPropagation(). 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-hookI see the listener attached to children elements and that explains why I get what I get. When using directonclickon 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
currentTargetgives the expected element but I’d still want to understand why children get the listener attached in one case and not in the other.silverdr
UPDATE:
Seems that it is. I found multiple examples where using
addEventListenercauses the same situation. One example here:and differences explained: