javascript - How to eliminate pointer events, but not touch events? - Stack Overflow

admin管理员组

文章数量:1391937

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.

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.

• javascript
• html
• css
• web
• touch

Share Improve this question Follow asked Nov 21, 2014 at 23:52 trusktrtrusktr 45.6k5858 gold badges210210 silver badges287287 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

From W3, 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.

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.

本文标签： javascriptHow to eliminate pointer eventsbut not touch eventsStack Overflow