Is it possible to prevent event triggering on bubbling and on capturing in JavaScript?
The e.stopPropagation() is not what I am looking for.
In my case I would like only a direct window blur to trigger the event. Triggering the blur event on window on every child control blur affects performance. (I believe that it is not related to the question, but still in order to avoid the xyz problem I will mention that I am using the blur event on window to check that the blur happened due to iframe click and in case it did, then I run some code. I.e. what I need here is a way to attach a blur listener to window, so that the blur listener would run only on window blur, but not on its children blur.)
Maybe there is a way to add an event listener to a target phase of window blur only? Or will the listener be always called on bubble and on capture and it is impossible to avoid?
event bubbling travels from child to parent. So it is essentially event capturing which you want to prevent.
When you add a event listener using
window.addEventListener("focus", callback, true/false)
This third argument suggest capturing or bubbling. So if you will just keeps it false event will just bubble and since window is the top most element it wont be propagated to anywhere else.
Related
I have an event listener on page 1
window.addEventListener("keydown")
It's causing me issues where another event listener "keydown" in a dialog on that page 1 is conflicting with the window event listener.
There are two event listeners:
dialog event listener
Page event listener
When I add text to the dialog, the page picks up that keydown. I don't want that. I can't add stopPropagation to the page then the dialog won't get the backspace.
What should I do? Can I replace the window. part to something more specific?
In your event handler for the text input, call event.stopPropagation() to prevent the event from being propagated further to other listeners.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
MDN explains:
If an EventListener is added to an EventTarget while it is processing an event, that event does not trigger the listener. However, that same listener may be triggered during a later stage of event flow, such as the bubbling phase.
What are the ways to prevent this from happening?
Possible Solutions:
Call event.stopPropagation() when the event is invoked.
I'm not a fan of this solution because the solution is not localized near the problem. The solution is in where the click originates and the problem is the code that adds the new event listener.
Add the event listener inside of a setTimeout:setTimeout(() => {element.addEventListener('click', clickHandler},0)
This solution is cohesive: the problem of the new eventListener triggering immediately is solved right where the event listener is added. Also it doesn't stop propagation for an event that other listeners might depend on. However, it feels like a hack to wrap it inside a setTimeout like this.
Do better solutions exist to prevent the new event listener from firing immediately due to the click that caused the event listener to be added?
This problem occurred for me when attempting to make a popup appear that closes itself for a click outside. Since the click that creates the popup is also a click outside. The popup closes immediately.
Link to example use-case including solutions
When using event of function in addEventlistener(), does the bubble process run when using event.target?
Almost all the events "Bubble"
But, if you want to stop an event from "bubbling" then you can use:
event.stopPropagation()
If you want to stop the event flow from event target to top element in DOM, event.stopPropagation() method stops the event to travel to the bottom to top.
I want to register a hold event, but "skip" the logic behind the "click" event on this element and its parents... how do I do that?
Test case (please feel free to fork & edit): http://codepen.io/muszek/pen/detAK
Use case: User holds on a #foo box to open up a #bar dialog with options for that element. Clicking anywhere (but on the #bar) closes the #bar. Currently, holding #foo opens up #bar, but immediately closes it when the button is released.
Hammer.js doesn't really handle the native events. So here you should listen for the tap event rather than the click.
I don't think a tap event is triggered if the gesture is a hold, but if it does, just call e.gesture.stopDetect(); to prevent multiple gesture type of being triggered. (for example, this is often use to prevent release event from being triggered after a swipe)
You can't prevent a native click being fired. What you should do is listen for 'tap' instead of 'click'. Hammer.js defines hold as a tap that lasts more than a certain amount of time.
If you are not listening for 'click' at all, but want to prevent an href or a button from being fired, forget it. Change the button for a div and the href for a normal text, style them so they look as before and now listen for 'tap' on them.
http://codepen.io/anon/pen/dPVXrP
Wrap inside parent <div>.
I have a DIV with a mouseout observer.
This DIV have also child Elements. mouseout event will alse be fired if the mouse pointer enter any of its child elements.
How can I prevent this behavior?
That’s expected behaviour.
However you can prevent it by giving those child elements an onmouseout event as well and returning false.
returning false in the event handler will stop the propagation of the event to parent-elements.
You may want to check a JS library.
JQuerys mouseleave function/event seems to be exactly what you’re looking for.
The API page also states the mouseleave event is IE-proprietary but JQuery emulates it for other browsers. If you don’t want to use JQuery you may want to check their source. api.jquery.com/mouseleave