JS: Touch equivalent for mouseenter

Question

is there a touch equivalent of the mouseenter.

I would like to detect if user slide on my DIV.

I prefer a solution depending directly on the target element not on a parent element with recounting positions etc.

The site: http://dizzyn.github.io/piano-game/ - works fine with mouse (mouse down and slide; not working with touch slide)

Thank you

Paynter

Answer 1

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

Colossian

Thank you, seems that "touchenter" is not implemented in Crome (Win8). That confused me. – Paynter

touchenter and touchleave are deprecated by the w3c, as noted by this commenter on another thread. – Homozygous

This should not be an accepted answer, as I'm trying to figure out the exact same problem. I have the existing functionality I desire with mouse point click drag and I'm trying to create it for touch devices. This person's "answer" gives no information on how to recreate that effect with touch and also has flat out incorrect information as others have stated touchenter and touchleave are not part of the spec anymore... – Pudendum

While touch events are deprecated, they are still supported, for the moment (5/2020) in most major browsers (not in desktop Safari but yes in mobile Safari) and they are, in my experience, much easier to use when doing custom multi-touch interactions. So if you're making something that needs to last a while, they are obviously a bad choice — but, if you're trying to prototype multi-touch interactions in a mobile browser, including touch-enter responses... they are still a sharp knife in the toolbox. – Claytonclaytonia

not a good answer. (deprecated) doesn't work as of 8/22 on Android 10 Chrome. pointerenter does the trick – Kyrakyriako

Answer 2

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]

Claytonclaytonia

thank you! that is a good way to still get enter/leave on other elements so you don't have to do a custom collision for touchstart/touchmove event, which like you said capture the events. – Kyrakyriako

Answer 3

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.

Huonghupeh

no exactly what you want... you can't get touch to drag to send you a mousedown + mousemove (Chrome on Android 10). You ONLY get a mousedown sent if you touch and release right away (essentially a touch click)... so can't use for dragging (entire screen does) – Kyrakyriako

Answer 4

I just wanted to say thank you to the previous poster. His suggestion worked perfectly. And I've been struggling to find a solution to this for weeks. If you're using Svelte within your pointerdown handler function I would suggest using:

const pointerDownHandler = (event) => {
    // whatever logic you need
    event.target.releasePointerCapture(event.pointerId);
}

He's accurate in saying this part is key. It will not work without it.

Methacrylate

I'm confused by this. So I have element that with css class on hover changes color so for touch on mobile it remains hovered until click somewhere else. Should this be in some way releasing that pointer from el I have on:pointerdown={pointerDownHandler} on el and I added *{ touch-action: none; } to css not that I entirely understand this. Is there like a manual mouse location I would have to set to other part on screen like 0,0 or something on pointerleave in which case why not just do that. on touchend – Encampment

and why even need pointer down? just use pointer enter and leave right? In which case would need to set variable like isHovered and use that for conditional class not have native css hover work. idk confused – Encampment

Answer 5

Answered this at Touchenter/Touchleave question. Check please.

https://mcmap.net/q/469955/-touchenter-and-touchleave-events-support

Viniferous

Answer 6

I will make a shot clarifying for Ian's answer:
Equivalent for mouseenter event is pointerenter event. But it will not work out of the box. To make it work you should:

1. Add to parent element pointerdown event listener with releasePointerCapture method

div.addEventListener("pointerdown",(e) => e.target.releasePointerCapture(e.pointerId))

2. Add to parent and to your element touch-action: none CSS property.

Enjoy :)

Chiton