How to eliminate pointer events, but not touch events?

Question

Setting pointer-events:none seems to also turn off touch events. This obviously doesn't make sense, because "touch" events aren't "pointer" events. My finger is not a pointer. :)

Is there some way to turn off only pointer/mouse events, but leave touch events alone? A property like touch-events would be nice.

Answer 1

Actually, a touch event is a specific type of pointer event based on the definition.

From W3.org, Pointer Events, Section 1

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

Also:

The events for handling generic pointer input look a lot like those for mouse: pointerdown, pointermove, pointerup, pointerover, pointerout, etc. This facilitates easier content migration from Mouse Events to Pointer Events. Pointer Events provide all the usual properties present in Mouse Events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. So authors can easily code to Pointer Events to share logic between different input types where it makes sense, and customize for a particular type of input only where necessary to get the best experience.

So, setting pointer-events:none; will affect both touch and mouse events.

So to answer your question; you can't distinguish between mouse events (I assume by pointer events in your question you basically meant mouse events) and touch events with css only and the pointer-events property. But since mouse events and touch events are different, you can revert to javascript for your needs in this case.

Answer 2

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

• Check touch support by using Modernizr or simply see a discussion about touch detection How can I detect device touch support in JavaScript?

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