Clever Geek Handbook

How do I eliminate pointer events but not touch events?

The setting pointer-events:none

also disables touch events. This clearly doesn't make sense, because "touch" events are not "pointing" events. My finger is not a pointer. :)

Is there a way to only disable pointer / mouse events but leave touch events alone? A property like this touch-events

would be nice.

+3


source to share


2 answers


There is no way to disable only mouse events via CSS. But you can easily do it with javascript:



  • Check out touch support with Modernizr, or just browse the discussion on touch detection How can I detect touch support in JavaScript?

  • If touch events are not supported, apply a CSS class (previously created) or directly add a CSS rule for all elements that you want to ignore pointer events.

+1


source


In fact, a touch event is a specific type of definition-based pointer event.

From W3.org, Pointer Events, Section 1

A pointer can be any point of contact on the screen, made with a mouse cursor, pen, touch (including multitouch), or other pointing device.

also:



Events for handling shared pointer input are very similar to events for mouse: pointerdown, pointermove, pointerup, pointerover, pointerout, etc. This makes it easier to carry content from Mouse Events for pointers. Pointer events provide all of the usual properties found in mouse events (client coordinates, target, button state, etc.) in addition to new properties for other input forms: pressure, contact geometry, tilt, etc. This way, authors can easily code in pointer events to exchange logic between different input types where it makes sense, and tweak for a specific type of input only where needed to get the best experience.

enter image description here

Thus, the setting pointer-events:none;

will affect both touch and mouse events.

So, to answer your question; you cannot differentiate mouse events

(I assume pointer events

you mainly meant in your question mouse events

) and touch events

only css and property pointer-events

. But since mouse events

both touch events

are different, you can fallback to javascript for your needs in this case.

+3


source






More articles:


All Articles