What is the Touch equivalent to Mouseout Event?

Question

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?

Solution 1

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

Solution 2

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

Comments

[dylnmc]

touchend and touchcancel (ie, not touchleave)?

[SW4]

@dylnmc - you are correct, the original answer was posted before the spec had progressed, touchleave is still experimental and likely due for deprecation, touchcancel is an eligible event (as reflected by the updates in the MDN ref) - good spot!

[Supun]

Thank you very much! This code helped me solve a cross-platform issue I was having.