JS: Touch equivalent for mouseenter

2019: Yes-ish: Using pointerenter.

BUT, by default, a touch (or mouse down) causes the element to 'capture' the pointer, preventing further pointerleave/enter events unless you explicitly release the capture.

Moreover, you'll want to set touch-action:none on relevant elements to avoid the browser intercepting touches for default pan/zoom etc.

Example:

CSS:

*{ touch-action: none; } 

JS:

let div = document.querySelector("div")
div.addEventListener("pointerdown",(e)=>{
    console.log("down")
    console.log("attempt release implicit capture")
    div.releasePointerCapture(e.pointerId) // <- Important!
})
div.addEventListener("pointerenter",(e)=>{
    console.log("enter")
})
div.addEventListener("pointerleave",(e)=>{
    console.log("leave")
})

Works in Chrome at least. Not so much in Mobile Safari 13 beta though... According to the w3c specs, I'm fairly certain it should work this way. Maybe when iOS 13 is officially released we'll be in the clear. [I've filed a bug and looks like it's being attended to.]

[Update: iOS 13 issue fixed. Should work in Chrome/FF/Safari]

Look into these events:

touchstart Triggers when the user makes contact with the touch surface and creates a touch point inside the element the event is bound to.

touchmove Triggers when the user moves the touch point across the touch surface.

touchend Triggers when the user removes a touch point from the surface. It fires regardless of whether the touch point is removed while inside the bound-to element, or outside, such as if the user's finger slides out of the element first or even off the edge of the screen.

touchenter Triggers when the touch point enters the bound-to element. This event does not bubble.

touchleave Triggers when the touch point leaves the bound-to element. This event does not bubble.

touchcancel Triggers when the touch point no longer registers on the touch surface. This can occur if the user has moved the touch point outside the browser UI or into a plugin, for example, or if an alert modal pops up.

Specifically touchenter and touchleave.

Source: http://www.javascriptkit.com/javatutors/touchevents.shtml

For anyone who is trying to handle touch events in a web app here is helpful documentation W3C - Touch Events which explains the events in detail and how they are handled.

WC3 states:

If a Web application can process touch events, it can intercept them, and no corresponding mouse events would need to be dispatched by the user agent. If the Web application is not specifically written for touch input devices, it can react to the subsequent mouse events instead.

In short:

You can merely handle mouse events relative to touch events instead of handling both touch and mouse events.