How do I use the mousein event in modern browsers? - javascript

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.

Related

How to click-through a div without losing its hover events?

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...

When does onmouseout occur?

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.

'Touchend' event of the parent do not fire if remove touched child element on touchstart

There is a parent div that described on touchstart and touchend event. It has a children that fully cover parent. On touchstart i remove the children and add other one. In this case touchend event will not be fired.
The same mouse events (mousedonw/mouseup) are working good in this case.
Here is the jsfiddle.
I can't use mouse events, because on devices (iPad, Android) mousedown event actually calls not when user begin touch an element but right before mouseup.
Ok, looks like i found the solution. I need to combined subscribe: touchstart and mouseup events.
http://jsfiddle.net/e3bUq/27/

What mouse/touch events should I use to cause a div to change color when cursor is dragged over it?

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

Difference between onMouseOver and onMouseEnter

I'm trying to have a simple html table, that highlights a row as a user mouses over it. Unfortunately the css hover item doesn't work for IE. That leaves me to simulate it in Javascript. I can use either onmouseenter or onmouseover.
What is the difference between them, and which one should I use?
Both onmouseenter and onmouseover fire when the mouse enters the boundary of an element. However, onmouseenter doesn't fire again (does not bubble) if the mouse enters a child element within this first element.
Unlike the onmouseover event, the onmouseenter event does not bubble. In other words, the onmouseenter event does not fire when the user moves the mouse pointer over elements contained by the object, whereas onmouseover does fire.
I always use onmouseover. I use onmouseover in the same purpose (highlights a row).
You might spare yourself some coding by just adding :hover support for all elements in IE too:
try csshover.htc

Categories