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
Related
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.
I'm using an module-project from Github on my Angular project, that lets me resize my DOM elements, which are drawn on top of a div, that works as a draw-board.
To shape my first elements, who are simple rectangles, by the way, i am using a mouseDown - mouseMove - mouseUp combination Event Listener, and then when i decide to resize one i hover over the edges and resize it.
Problem is that on the resizing event, which is a combination of resizestart - resizing - resizeend, although i know that the module is using and mouseDown-Move-Up Event listener and emits the events mentioned before, i cannot get the MouseEvent created, and instead i get the ResizeEvent, which doesn't have a stopPropagation() method, so calling it as it is gives an error(that it's not a function).
I need to stop Propagation, because when i resize my Elements on my draw-board the click event gets bubbled to the immediate parent element, and as a consequence i resize an existing element and create a new rectangle at the same time.
On top of that, the ResizeEvent doesn't even include an "event.target"-like property which makes matters worse...
So, i was wondering how can i work around this one??
I was thinking using #HostListeners, but wouldn't the code executed in that directive get mixed up with the Resizable directive(the module is declared as a directive)??
And messing around with the Resizable-module files doesn't sound like a good idea, since if anyone wants to use my module will have to download my tampered files of the resizable project...
Answer to your question is :
event.preventDefault() will stop the default functionality.
I think this may solve your issue.
The event.preventDefault() method stops the default action of an element from happening.
For example:
Prevent a submit button from submitting a form
Prevent a link from following the URL
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
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>.
This question already has answers here:
What's the difference between event.stopPropagation and event.preventDefault?
(8 answers)
Closed 9 years ago.
I was answering a question here in SO, and I stumbled on an odd behavior.
Check this demo
It's working great. I'm adding event handlers and when I click the image I have
alert(2) without firing the link handler alert(1). The odd part is that, if I remove
the preventDefault, alert(1) still doesn't fire, but it follows the link.
How come that stopPropagation, prevents the handler from bubbling the event, but it needs preventDefault to not follow the link?
This is purely for an educational reason. I just want to understand what's happening.
//EDIT please see the demo before answering. I have handlers on two different elements.
Although stopPropagation prevents the handler of the parent element to fire, it doesn't prevent it from following the link. But doesn't stopPropagation, prevent it the event from bubbling? Doesn't it nullify the event for the parent element?
//Why the event is nullified for the handler alert(1) but not for the following of the link?
All events in Javascript fire on the outermost element interacted with and then fire again on every element in it's ancestry until it reaches the body. In this way the event is firing first on your img and then again on your a because your img is inside the a.
If this behavior is not desired, that is why you would use stopPropagation to prevent it from bubbling up the chain. In jQuery, it is easy to check what element originated the event, so you can ignore it in certain cases by using event.target.
if (e.target == this) {
// run code only when this element is the originator of the event
}
When a click event is fired there are basically two veins, the Javascript event, and the native event. If the native event isn't preventDefault() or return false somewhere, it is going to fire, regardless of any stopPropagation().
How come that stopPropagation, prevents the handler from bubbling the
event, but it needs preventDefault to not follow the link?
Well, you explained it well.
Default behaviour of a link is being followed. Preventing the default is stopping it from being followed.
Propagation behavior is event bubbling to the parent, preventing propagation stops the bubbling to the parent. This is different from following the link because following the link is something related to the link itself not attached to its parent, so, it's still there.
return false; if I remember correctly tells jQuery to do both.
Update:
I see you are differentiating the handlers from following the link, based on this, I think this is the answer for you:
jQuery stopPropagation not working when applied to textbox inside anchor
I want to catch which element is on focus when users use tab key to move their focus. For example, there is a form and users can use tab key to move forward to next form element. I'd like to know which element is the current on focus.
Thanks,
Paul
For many event types one can use event delegation, whereby one captures the event on some containing element as it bubbles up the document hierarchy, and then establishes the element on which the event originated. Unfortunately, the focus, blur, and
change events do not bubble.
However, in DOM implementations that implement the standard DOM Events model, one can instead use the capture phase, which intercepts the event on its way down to the element where it will fire.
This doesn't work in (surprise, surprise) Internet Explorer (IE), which still doesn't have an implementation of the standard event model, even in IE8. However, IE has its own focusin and focusout events, which do bubble.
The end result is that, as usual, one has to write one's code so as to deal with the way proper browsers work, and also with the way IE works.
Luckily this is one of those cases where ppk (aka Peter-Paul Koch) of quirksmode.org has already done the hard work: his article Delegating the focus and blur events should tell you all you need to know, as well as providing a succinct explanation of how event delegation works.
use the onFocus event on the form elements, so
<form>
<input id="fred" type="text" onFocus="alert('focused this');"/>
</form>
check out http://www.w3.org/TR/html4/interact/scripts.html#adef-onfocus
there are javascript events that are related to focus. The onfocus and onblur (opposite of focus) events can be used to update a variable that says which form element is currently in focus.