I mean does it occur every single moment when the mouse is not over the element? Or is it a single action when mouse leaves the element? It is important because I need to know when the mouse pointer leaves the element, but I need to know only when it enters again. I don't want my script to run over and over again while the mouse pointer is not over the element.
The mouseout event fires when the user moves the mouse out of an element. Unfortunately these events bubble up.
http://www.quirksmode.org/dom/events/mouseover.html
If you do not want the event to bubble up, add event.stopPropagation();
The mouseout event is raised when the mouse leaves an element (e.g,
when the mouse moves off of an image in the web page, the mouseout
event is raised for that image element).
Source: MDN
This would imply that it only occurs once and not continuously, since the mouse can only move off of the element at a single point in time. Once the mouse is off the element the event has been fired.
Related
There are two pointer exit events: mouseout and mouseleave.
The difference between the two is that mouseleave fires only when the pointer leaves the watched element, while mouseout fires when the pointer leaves the watched element or any of its children.
When you move the pointer in and out of an element, mouseleave fires exactly once, while mouseout may fire more than once, depending on the number of children you hovered over.
The question is: where is the mousein equivalent of mouseout? On MDN, only mouseleave, mouseout and mouseenter are documented.
For a rare use case, I need to run code on every element that the pointer enters, including dynamically created ones. mousein would solve this for me, but it does not seem to exist anymore.
The question is: where is the mousein equivalent of mouseout
The corresponding event to mouseout is mouseover, and for mouseleave it is mouseenter.
Their main difference is that that mouseleave/mouseenter does not bubble, which is well explained in e.g. MDN, but in short
mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).
mouseover, it differs from mouseenter in that it doesn't bubble and that it isn't sent when the pointer is moved from one of its descendants' physical space to its own physical space.
I have 2 divs stacked upon one another. I want to be able to receive click events for the bottom element without losing hover events for the top element.
If I assign pointer-events: none top the top element, the click-through works, but then I lose the hover events for the top element.
How can it be done?
The MDN docs clearly says that's what is supposed to happen:
none
The element is never the target of mouse events; however, mouse events
may target its descendant elements if those descendants have
pointer-events set to some other value. In these circumstances, mouse
events will trigger event listeners on this parent element as
appropriate on their way to/from the descendant during the event
capture/bubble phases.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
What you can do is write a jQuery script that captures the clicks and transmits them.
jQuery("top-div").click(function(e)
{
e.preventDefault();
jQuery("bottom-div").click();
});
Something like that...
I have a data visualization here (the second one):
http://mikeheavers.com/main/work
If you click on the circles representing skill fields, it reveals inner green circles with the particular skills. If you hold down on the green circles representing the skills, they animate, grow, and then shrink back on mouse release. However, if you simply click on the circles, they grow, but do not return to their previous size (the mousedown is not registered I guess) - which results in a circle that will constantly get bigger each time it is clicked.
Is there a way to prevent click behaviour, either through d3 or through Javascript / jQuery? I only want mouseup and mousedown.
I'm observing different behavior than what you described.
If you single click a circle, it doesn't matter how long the click is (whether it's held or not), it returns back to its original size.
If you click a circle repeatedly and quickly, this is when it starts to grow and does not return to its original size.
If you hold down a circle and then move your mouse outside of it, it both stays pink and doesn't return to its original size.
I think attaching a simple .on('mouseout', handler) to return spheres to their original size will solve the last issue, which is pretty glaring, and any missed mouseup events due to moving outside. You can also attach a mouseup to the whole document (d3.select('body').on('mouseup', handler)), which will catch any such event; then you would just need to record the last sphere that was clicked.
Additionally, to fix your original problem, you can make sure that mouseup events are triggered by adding e.preventDefault() in the mousedown events. This will prevent fast clicks from turning into double-clicks or other events by the browser.
Other posts that discuss these issues:
mouseup event isn't always triggered
mouseUp event on drag
I have an app that uses mouseup and down to draw elements. The problem is that if for any reason the mouseup event is not fired after mousedown ( let's say I introduce an escape key that cancels drawing the new element), the element would be "incomplete", and hence it would cause problem. So I want to know if there is any mechanism that I can use inside mousedown to ensure that mouseup is fired after it, and if not, destroy the new element ?
You're gonna have to destroy the drawing on the events which you can think of that would make the mouseup not fire following the mousedown -- pressing keys, releasing the mouse outside of the drawing region, right clicking while left click is still holding down, switching the window with alt+tab while drawing, computer being struck with lightening in the middle of a tornado while drawing, etc.
I'd like to know what mouse events I need to use for the task below.
When a cursor is dragged over a div, the div changes color.
By dragged I mean that the mouse button has been clicked once (and not released) somewhere outside the div and then the cursor has been moved over the div (the mouse button has not been released at any time during this process).
The div shouldn't respond to onmouseover. The mouse button needs to have been depressed and then dragged over the div to activate the change in the div.
I'm also wondering if there are any equivalent events for touch devices?
If i understand this right you can do the following:
set a global variable "mousedown" to false
use the "onmousedown" event to set "mousedown" to true
use the "onmouseover" event of your div to fire a function where you first check if mousedown is true and if so make the div visible
use the "onmouseup" event on your page to set "mousedown" to false again
For anything javascript related to touch event you should have a look at Sencha Touch
EDIT: If you want to avoid such frameworks. You should have a look at The HTML5 Specification. There are a couple of new events related to touch devices.
Here is a nice article about it:
http://www.html5rocks.com/en/mobile/touch.html
I'd recommend JQueryUI for this - it has several drag-specific events built-in. The drag event for touch devices is called touchmove