If i perform mouse down on element A and release the mouse when i am on element B, neither of the elements receive the mouseUp event.
Is it possible that one of them will receive the event (it does not matter to me which of the two)?
Neither of the elements receive the mouseup event in the case of what you described because you attached an event listener of event type mouseup to element A. I would conclude that particular mouseup event listener will not fire if you release the mouse button while hovering over anything not contained within element A.
Related
I'm trying to attach a mousedown event listener to the window. This event listener sets body pointer-events to none. Then I have a mouseup listener which sets pointer events back to "auto".
Problem: I need the same event.target for mousedown and mouseup, or specifically I need my target for mousedown to be HTML.
Here is an example: https://codesandbox.io/s/practical-stonebraker-3mut9?file=/src/App.js
If you mousedown the <rect />, you can see in the console, event.target is rect.
Since now pointer events are disabled, mouseup's event.target is HTML.
How can I make sure that mousedown event.target is HTML?
I have the following code:
document.oncontextmenu = function(evt) {
evt = evt || window.event;
console.log(evt.target, evt.toElement, evt.srcElement);
};
By clicking the right mouse button on a <div class="foo"></div>, returns this:
div.foo, div.foo, div.foo
By clicking the right mouse button on a <input>, returns this:
input, input, input
All seem to bring the same result. Is there any situation that one of them has different use than the others?
The event target is the element to which the event is dispatched:
The object to which an event is targeted using the DOM event
flow. The event target is the value of the Event.target
attribute.
srcElement is a IE non-standard way to obtain the target.
The current event target is the element which has the event listener which is currently invoked:
In an event flow, the current event target is the object associated
with the event handler that is currently being dispatched. This
object MAY be the event target itself or one of its ancestors.
The current event target changes as the event propagates from
object to object through the various phases of the event flow.
The current event target is the value of the
Event.currentTarget attribute.
Using this inside an event listener is a common (and standard) way to obtain the current event target.
Some kind events have a relatedTarget:
Used to identify a secondary EventTarget related to a UI event,
depending on the type of event.
fromElement and toElement are IE non-standard ways to obtain the relatedTarget.
I added a transitionend event listener to a div. This div has children who have transition on some elements. I want the transitionend event to only fire for the element I added it for, is this a bug? or expected behavior? How to make it fire only if its the one i added the listener to?
Events are bubbling by default,
meaning that they will be "transmitted" to the parent element until they hit the body or a handler that will stop them.
You can either :
Filter by the event's target being sure it's the element you're targetting.
Listening to the event on children and event.stopPropagation() on them. That way, they won't bubble through the parent anymore.
If you'd show us some code, it would be easier to help you, depending on your current implementation.
This process is called as Event Bubbling.The thing you can do is either detect the bubbling using the event handler or prevent the bubbling by stopping the propogation. You can do this by
event.stopPropagation()
In IE beofore 9.
You can do it as
window.event.cancelBubble = true;
Please have a detailed look here
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 an element with some child elements. When the mouse leaves the parent element I want to hide the parent and it's children. Problem I'm having is that when I hover over any of the children, the mouseout event is being fired. What's the best way to prevent this? I really only want the event to fire when the mouse is not within the parent or any of it's children.
The event is bubbling up from the child to the parent (where it is being caught)
You should catch the event on the children by adding a listener and making the propagation stop there.
This code will stop the event from bubbling up to the parents handler
function onMouseLeave(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
question: The mouse off event is fired by the parent, when it should not. Mouseing over the child should not trigger a mouse off from the parent. How can we stop this?
You only need a mouseout handler attached to the parent element. But...
You need to check that the parent is actually the target of the mouseout event, as opposed to the event bubbling up from one of the children. Check event.target (W3C) and event.srcElement (IE).
You also need to check that the element that the mouse will be entering is not a descendant of the parent. Check event.relatedTarget (W3C) and event.toElement (IE).
From http://api.jquery.com/mouseover/:
mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.
and the same goes for mouseout vs mouseleave