When working with desktop browsers you can use the JavaScript event mouseout.

When using a mobile browser you have only touch events. Tried to find an equivalent for the mouseout event. It turns out that touchend event is not the equivalent because it will only fire when the touch ends in the element where the touch handler is registered.

Is there a touch equivalent to the mouseout event?

When working with desktop browsers you can use the JavaScript event mouseout.

When using a mobile browser you have only touch events. Tried to find an equivalent for the mouseout event. It turns out that touchend event is not the equivalent because it will only fire when the touch ends in the element where the touch handler is registered.

Is there a touch equivalent to the mouseout event?

• javascript
• css
• html
• touch

• Possible Duplicate? Prefered Alternative to OnMouseOver for touch – Izzy Commented Jul 22, 2014 at 14:00

3 Answers 3

See this article from MDN

Specifically, touchend

When the user lifts a finger off the surface, a touchend event is sent.

Although, you may also want to refer to touchcancel

If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the touchcancel event is sent

If you are looking for a way to imitate the “mouseout” event, I made this implementation within the “touchmove”- and “touchend” event.

element.addEventListener("touchmove", (e) => {
 if (this.isTouchEventWithElement(e)) return;
 // PERFORM MOUSEOUT ACTION
});


element.addEventListener("touchend", (e) => {
 if (this.isTouchEventWithElement(e)) return;
 // PERFORM MOUSEOUT ACTION
});


isTouchEventWithElement(e: TouchEvent): boolean {
 const element = this.getElement();
 const item = e.changedTouches.item(0);
 if (element === null || item === null) return false;
 return element.getBoundingClientRect().right > item.clientX &&
     element.getBoundingClientRect().left < item.clientX &&
     element.getBoundingClientRect().top < item.clientY &&
     element.getBoundingClientRect().bottom > item.clientY;
}

Hope it helps.

Inspired by: http://www.javascriptkit.com/javatutors/touchevents.shtml

Edit:

Consider this a mobile-only solution. Doing the same logic in the web version of your app (but with mouse instead of touch events) might not be satisfying. Some time after testing this strategy I noticed it worked perfect on mobile for me. On web however, I am not satisfied as the user moves way more after clicking sth. So if ur app is mobile only, u can use this safely. But for web u might really wanna test this thoroughly, if it fits u. I used th

Different Solution:

I was also struggling with the touchcancel not at all behaving the same as the mouseout event. I think there is no such event for mobile screens currently.

How did I solve it:

I simply used the touchmove event to simulate the mouseout event. I know this is probably not going to be the solution you were looking for. And there will be use cases where this is not at all helpful. But for my use case, I tested it and the UX turned out pretty good. You can give it a go.

This is especialy OK, if your target element does not have that big of a surface area, where touchmove's are very close to mouseout's.

Make it even better:

If you want to improve this even more, you could count the amount of times touchmove fired. As long as it has only fired a small amount of time, say < 10x, then you could decide to ignore the event. (You can also adjust the count if your element is bigger, but for big elements or elements that are not equi-dimensional, this will work worse.)

And voilà, you got yourself sth really close to a mouseout event.