I have a span inside a div, the div has an onfocus() event, while the span has an onclick() like so:
<div id="divEl" tabindex="0">
<span id="spanEl"></span>
</div>
https://jsfiddle.net/nyva4jrc/
When clicking on the span, the div.focus event fires first, despite the fact that, by my understanding, it should only fire after the click has bubbled up to the div.
Is there a a reason for this, and is the event firing order in this situation defined? Also is there any reference for the order in which dissimilar events fire?
Related
I have developed the onclick functionality which performs specific operation regardless of clicks of tags, it seems like when I click on child tag or child click event fires its relevant parent click event automatically fired.
Need to prevent the event or handle event related to a specific tag is clicked.
What I want is when parent tag is clicked then only parent onclick function should fire, in case of child tag is clicked then only a child's onclick event should be fired.
The same functionality developed using the react app(reactjs) but the result is the same, can not able to handle the onclick event separately.
<div onClick="console.log('div tag click event fired')">
<h1 onClick="console.log('h1 tag click event fired')">This is a Heading</h1>
<p onClick="console.log('p tag click event fired')">This is a paragraph.</p>
<div>
using Event stop propagation keeps the event from bubbling any further up into the DOM. here is sample
use event.stopPropogation() to prevent event from bubbling to parent.
<div onClick="console.log('div tag click event fired')">
<h1 onClick="console.log('h1 clicked');event.stopPropagation();">This is a Heading</h1>
<p onClick="console.log('p tag click event fired'); event.stopPropagation();">This is a paragraph.</p>
<div>
with react it's slightly different from vanilla js, you can check it here:https://reactjs.org/docs/handling-events.html
I have a link within a link, both with an onClick event.
The outer link works as desired. However, the inner link triggers both onClick events. I would like it so that the outer event is not triggered when the inner link is clicked.
<div onClick="console.log(1)">
Inner
</div>
JSFiddle
Javascript events will propagate up through the tree.
So when you click on the inner anchor it will also emit any click events for elements higher up, so the div element.
To stop this the inner click handler has to prevent the event from propagating with e.stopPropagation();.
However this gets a little messy when you don't register handlers with .addEventListener() in JavaScript.
If you add events this way you can do it like this (first give your anchor an id, say inner) which is nice and easy:
document.getElementById('inner').addEventListener('click', function (e) {
e.stopPropagation();
console.log(2);
});
You can however pass the event into your click handler if you do wish to use the attribute, so:
Inner
//JS
function innerHandler(e) {
e.stopPropagation();
console.log(2);
}
Generally speaking (this is my opinion) i would avoid the latter. Events registered like this are difficult to remove and modify. You can't also easily register multiple handlers to the same element for the same event.
stopPropagation docs
Hi I am binding onclick event to parent as well as child (same method). Event is getting fired two times How to avoid this?
<div id="sparentId" onclick="javascript:somemethod()" >
<button id="childId" onclick="javascript:somemethod()"></button>
</div>
Onclick of Div the event is getting fired two times.
Try:
<button id="childId" onclick="javascript:somemethod(event)"></button>
JS code
function somemethod(event){
event.stopPropagation();
}
The reason that the onclick event is showing twice, is because there is something called event bubbling in JavaScript.
Take a look at the following:
This image shows that, if the <img> was clicked, the event would "bubble" up to the <p> tag, then to the <div>, then to the rest of the document. If there was an onclick event on the <p> tag, and even if the <p> tag was not clicked (but the <img> was), the event would necessarily "bubble" all the way up the DOM, and would still continue when an event was fired on the <p> tag (in other words, if you also had an onclick event on the <div>, then that would fire as well.
So what you should do is this:
<div id="sparentId" onclick="javascript:somemethod()" >
<button id="childId"></button>
</div>
In other words, as I explained above, you wouldn't need the extra onclick event handler in your button anymore, because when your button is clicked, the event bubbles up to the parent div, which would fire that event.
If you want to use your original HTML code, that's fine as well - just add this:
function somemethod(evt) { // the method you run
// some code
evt.stopPropagation(); // stops bubbling
}
This effectively stops the event from bubbling up your DOM tree.
It is getting called twice because you are calling it twice, i.e. once in the div click and once in the button click. the button is already inside the div.
<div id="sparentId" onclick="javascript:somemethod()" >
<button id="childId" onclick="javascript:somemethod()"></button>
</div>
try
<div id="sparentId">
<button id="childId" onclick="javascript:somemethod()">Click Me</button>
</div>
use
event.stopImmediatePropagation()
I am facing a rather awkward problem. I register two event handlers, one for mouseenter and one for mouseout for the li elements on the page. It has multiple div areas inside it. When I leave the li element it calls the out handler, which is ok. What is not ok is that the out handler is also triggered when I leave a div inside that li.
Below is an image that illustrates it. The blue area is the li element which I register an enter and out event for.
I tried to register handlers on the inner divs that would stop the propagation but it only results in the triggering of the out handler when I enter those inner divs.
Any idea what is going wrong here?
Use mouseleave instead of mouseout. Mouseout triggers everytime your mouse is going off from exactly atop of the target. So when you enter the divs, your mouse goes out of the li and on the div. But it is still inside the LI of course, using mouseleave will make it work.
From JQuery doc:
The mouseleave event differs from mouseout in the way it handles event
bubbling. If mouseout were used in this example, then when the mouse
pointer moved out of the Inner element, the handler would be
triggered. This is usually undesirable behavior. The mouseleave event,
on the other hand, only triggers its handler when the mouse leaves the
element it is bound to, not a descendant. So in this example, the
handler is triggered when the mouse leaves the Outer element, but not
the Inner element.
I have two overlapping div elements in my web app.
On the underlying div an event is registered on double click.
On the div that lies above the other div a event is registered on click that hides the div.
The problem is that if I double click on the above div element it is hidden after the first click BUT the second click causes the double click event on the underlying div to fire - how can I prevent that?
Mixing "click" and "double-click" is going to be problematic at best. However, in this case things might get better if you just ensure that your handler for the "click" event (the event that hides the element) returns false to the browser.
How to do that depends on how your handler is registered. If it's like this:
<div onclick='hideMe();'>
then you'd change that to
<div onclick='hideMe(); return false'>
If you're using some framework or some other means of attaching the handler, then just having the handler function return false should do it.