What is the difference between jQuery's mouseout() and mouseleave()?
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.
Source: http://api.jquery.com/mouseleave/
There can be times when mouseout is a better choice than mouseleave.
For example, let's say you've created a tooltip that you want displayed next to an element on mouseenter. You use setTimeout to prevent the tooltip from popping up instantly. You clear the timeout on mouseleave using clearTimeout so if the mouse leaves the tooltip won't be displayed. This will work 99% of the time.
But now let's say the element you have a tooltip attached to is a button with a click event, and let's also assume this button prompts the user with either a confirm or alert box. The user clicks the button and the alert fires. The user pressed it fast enough that your tooltip didn't have a chance to pop up (so far so good).
The user presses the alert box OK button, and the mouse leaves the element. But since the browser page is now in a locked state, no javascript will fire until the OK button has been pressed, meaning your mouseleave event WILL NOT FIRE. After the user presses OK the tooltip will popup (which is not what you wanted).
Using mouseout in this case would be the appropriate solution because it will fire.
jQuery API doc:
mouseout
This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.
So mouseleave is a custom event, which was designed because of the above reason.
http://api.jquery.com/mouseleave/
Event Mouseout will trigger when mouse leaves the selected element and also when mouse leaves it's child elements also.
Event Mouseleave element will trigger when pointer will leave the selected element only.
Reference: W3School
I encountered a similar problem using plan Javascript instead of jquery, but they're some how related and I'll leave my two cents in case someone else is on the search nowadays.
I was trying to use the mouseout event on a navigation menu. The parent div had a submenu composed of a list of uls elements. When I tried to navigate to the div children elements the mouseout event was fired. This was not my desired output.
From the docs
mouseout is also delivered to an element if the cursor enters a child
element, because the child element obscures the visible area of the
element.
And that was the issue.
The mouseleave event did not have this issue. Just using it made things work for me.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
Related
I have a single div on a page. It has an onclick event handler. When the user clicks on that div I expect that the event handler will be called. But there is this CSS rule as well: when that div has a focus, it will be moved 50 pixels to the right (away from the mouse pointer). As a result of this the onclick event handler is not called, even though the user clearly clicked on that div at the beginning. It's as if the browser first applies CSS and only after that decides, what did the user clicked on.
I made a simple demo here: https://jsbin.com/yalazam/edit?html,css,console,output Click on the yellow square (that is the div) in the fourth column and see the console in the third column. Only a message "focus square" will appear, but not a "click square".
Does this behavior makes any sense? Is there any case when it is useful? Or should I just accept it as a weird behavior of the browser?
The relevant point here consists in the definition of what a click event is:
An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.
This means that in your example, no click event is fired on the div you're targeting, because although the mouse press happens inside that div, the release happens after it has moved (unless the user does something unnatural) so is not within the same element. A click event will fire on the body (which in your example is the "most specific ancestor" referred to on MDN), but that won't be terribly helpful to you to listen for - because a click on the body can happen in many other ways, and you can't event use the event's target property to see where it originated, because in this case that is the body itself as explained.
If you really need this effect then use the mouseDown or mouseUp event rather than click, depending on what feels most natural to you. But the real answer is not to do this, as it is likely to be unexpected to your users and annoy them.
On this page: https://turbo-theme-seoul.myshopify.com/ the drop-down menus appear when mouseover the corresponding menu item. In order to inspect the HTML elements of the drop-down menus, I need to force them to display. Normally this can be done by forcing the state of the parent menu item to be :hover in developer tools, but in this case it doesn't work. I guess the drop-down is triggered by javascript instead of CSS. How can I make this drop-down appear programmatically without having to move my mouse over it? I tried
$($0).hover()
and
$0.dispatchEvent('mouseover')
on the parent menu item, they are both not working. It seems to me that 'mouseover' event can't be triggered programmatically. How do I do this then? PS: I know I can just find the drop-down menu in HTML and remove "display:none" from them, I just want to know if there is any way to trigger the mouseover event and let the dropdown menu appear programmatically for learning purpose.
As the jquery official document says:
The .hover() method, when passed a single function, will execute that handler for both mouseenter and mouseleave events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the event.type.
so the hover event is consist of mouseenter and mouseleave event, so you can't trigger the hover event programmatically since you can't trigger mouseenter and mouseleave at the same time.. So you should use .mouseenter() to show your drop-down, and use .mouseleave() to hide it.
I have divs, which are made to textinput fields by a plugin. Also those divs are draggable.
Right now, I have reached, that if you drag the div, it gets dragged, and if you just click on it, it gets a ".focus()".
The problem is now, that if I click it once, i get a focus on it. But the cursor jumps to the beginning of the line.
What I want, is the cursor on the place, I clicked.
How can I do this with jquery? Thanks
EDIT (My JS Code):
$('.mydiv').click(function(){
//actually, it does not focus on "$(this)" but on a div inside ".mydiv" which
//is generated by the plugin
$(this).focus();
})
You could consider listening for mouseup and mousedown instead of click, which would help you distinguish between which event the user is performing. Like, if there is a mouse down event, and the user moves the mouse before a mouseup event, then you're in "drag" mode. If there's a mouseup event, and the user is not in "drag" mode, then the user has clicked, and you can fire a focus event.
That's the approach I would take without knowing more about what you're doing.
The truth is that you have a considerably more complex interface requirement than most, meaning you're going to have to give the computer more instructions to determine what to do :)
Using jQuery, I often like to use mousedown and mouseup events in conjunction for pushable buttons.
However, in every case I've used the mouseup event, binding the click event instead seemed to produce identical results.
Is there any substantial difference between the two methods below?
// Method 1
$('.myButton').bind('click', callback);
// Method 2
$('.myButton').bind('mouseup', callback);
Please note I'm seeking a technical explanation on the differences between using both methods. This has no relation to the question that has been flagged as a dupe: Differentiate click vs mousedown/mouseup
With a mouseup event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer.
A click event requires the mousedown and mouseup event to happen on that element.
The normal expectation is that a click requires both the mousedown and mouseup event, so I'd recommend the click event.
From the possible duplicate, it appears that mouseup and mousedown events can also be caused by mouse buttons other than the left click button. Which is very different from what a generic user would expect.
My understanding is that "click" hides lots of complexities (such as making sure that mousedown/up occur on the same element, cancelling with ESC/right click). Using "click" over "mousedown/up" should be preferred.
One scenario where "click" does not seem to work when app updates content very often in such a way that underlying DOM elements get replaced. In this case "click" will not be triggered and it might result in poor customer experience.
I think Mouse Down and Mouse Up events give you further control over the click event. It divides the click event into two more events so that more details can be coded for each event. Click event restricts the mouse click and force you to code both the events in the same function.
You can understand this restriction if you ever try to make your own dragging behavior.
Dragging needs a mouse-down event to start a drag behavior. You cannot do it with click event. And since you need a separate mouse-down event. The requirement of a separate mouse-up event becomes obvious.
Once the dragging starts ( you have not yet release the mouse button) you need the object to change position as per the cursor position. This too needs to be coded only in mouse-down event.
However you can use click event too if we could change the way how people drag the objects. For example click-1 starts the drag and click-2 stops the drag and puts the object on another position. But there are two problems I see:
It does not look natural. As in the real world we are in habit of
pressing the object and dragging it.
It can be process intensive to move heavy graphics just by clicking and mouse-move.
I would like to add to the other answers that click event works on touch-enabled devices while mouseup / mousedown do not (obviously because there's no "mouse")
Note that there's a 300ms delay on touch devices with the click event.
The biggest difference that affects the way I code is: the click event on an a HTML tag is responsible for changing the URL. In contrast, the mousedown and mouseup events will not acheive this
I have a Canvas which responds to mousedown events on it. I am then adding an input element to the DOM, and absolutely positioning this so it is over the canvas.
After then user has clicked on the input element, and entered some text, they then click back to the canvas. My problem is that this first click merely sets the focus back to the canvas, but is not registered as a mousedown event on the canvas element.
What can I do to make sure that the first click is registered?
How are you attaching the events? This should "just work", unless there are extenuating circumstances.
Here's an example:
http://jsfiddle.net/bSpe4/
Depending on what your code looks like, giving your canvas a tab index value may also help.
theCanvas.tabIndex = 0; // might fix your particular issue
I just had exactly this problem. I needed to listen for both left and right clicks and was using a mousedown.
In case anyone finds this as I just have. I "solved" it by attaching the event to mouseup rather than mousedown.
That way the focus happens when on mousedown and the event triggers on mouseup which is fine for what I'm doing.