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?

Answer 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

Answer 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