Questions tagged [pointer-events]

In HTML5: hardware-agnostic events from devices like a mouse, pen, or touchscreen. In CSS: a property specifying if a particular graphic element can become the target of mouse events.

Learn more about HTML5 pointer events:

Learn more about CSS pointer-events property:

238 questions
3
votes
2 answers

PointerEvents: Detect touching "through" an element

Using pointer events, I can't find the right event to trigger for finger-based touches on smartphones (tested with Chrome Android and Chrome Devtools with mobile emulation). What I need: A "hover" event if you touch action passes through an element…
Dynalon
  • 6,577
  • 10
  • 54
  • 84
3
votes
1 answer

pointerup event does not fire for mouse actions on a link when pointermove has been detected

I can't get the pointerup event to fire on a link (an A tag with a href attribtue set) for event.pointerType == 'mouse' if the mouse was moved between pointerdown and pointerup. I have the following scenario: var lastEvent = false; var handler =…
Xyz
  • 5,955
  • 5
  • 40
  • 58
3
votes
1 answer

How can I access the precision touchpad pointer events releeased in edgeHTML 17

I'm developing a game in canvas that interprets "wheel" events as a command to zoom in/out on the scene. I was playtesting in Edge on my laptop when I realized that Edge was not firing "wheel" events while 2-finger scrolling on my precision…
3
votes
1 answer

How to stop scrolling only on using pen/stylus and not on finger touch

I'm working on a web app which needs to prevent scrolling on using a stylus but still allow scrolling on swiping the screen with a finger. The problem I'm running into is that only the pointerstart event can distinguish between a finger touch and…
JasonY
  • 752
  • 10
  • 24
3
votes
1 answer

Youtube iframe not responding to clicks passed through image above with pointer-events: none

http://jsfiddle.net/aintnobody/0L1yumpe/ vs the same code on http://www.aintnobodymusic.com/monkey The issue: On the fiddle, everything works as it should. The image above in all cases is ignored via pointer-events: none, and the click passes…
aintnobody
  • 129
  • 1
  • 11
3
votes
2 answers

Click-through with hover effect in CSS

I'm trying to make a button without a link, as the background is already linked. Therefore you should be able to cick through it. I know about pointer-events:none but when using this, the div's :hover won't work anymore. Is there any way to achieve…
Jo Hannes
  • 55
  • 2
  • 10
3
votes
0 answers

Dynamically prevent page scrolling on pointerdown event

I use canvas to paint objects that can be dragged around. If user touches an area with no objects, he can scroll the page. I have a working touch events implementation and have trouble adding PointerEvents API support. With touch events API I use…
Viesturs
  • 1,691
  • 4
  • 21
  • 25
3
votes
1 answer

how to stop only the hover pointer event in css

I have an interactive background that uses css to change opacity on hover. On top of this (absolute positioned) is a text layer. In order to allow for the background to react even with the text on top I have added css pointer-event:none to the div…
Finglish
  • 9,692
  • 14
  • 70
  • 114
2
votes
1 answer

Using W3C PointerEvent API and be able to detect a double click?

Writing a rich web application I have the need to support all types of users, some are using a mouse, some are using a touch screen (e.g. on a mobile device). So the W3C PointerEvent API is exactly what I need to handle the user interactions. This…
Chris
  • 3,265
  • 5
  • 37
  • 50
2
votes
1 answer

How to allow highlighting of HTML text when covered by transparent div?

I have a React application in which I have a transparent div covering text. The transparent div acts as a dropzone for draggable elements. There are also some children elements that may contain some text. ...

some…

Bud Linville
  • 193
  • 1
  • 10
2
votes
0 answers

How can I debug/emulate Pointer Events?

I'd like to support multi touch and pen/stylus input for my application using Pointer Events. Is there a way to debug touch/pen input on a desktop without any input hardware like this? I would like to emulate several situations, like hovering with a…
Jespertheend
  • 1,814
  • 19
  • 27
2
votes
0 answers

Pinch/zoom with pointer events in Javascript clarification

The pinch/zoom example on MDN using PointerEvents looks easy enough, yet looking a bit closer, I wonder about the following. If two touching fingers are moved simultaneously with fixed distance, I assume the browser will generate interleaved pointer…
Harald
  • 4,575
  • 5
  • 33
  • 72
2
votes
0 answers

Pointer events API inconsistency

When you perform the following sequence of interactions with a mouse on a PC: Left mouse down Right mouse down Left mouse up Right mouse up The events reported are: Left down Right up As opposed to the expected: Left down Right down Left…
Steven Lu
  • 41,389
  • 58
  • 210
  • 364
2
votes
1 answer

Why does a mouse right click fire the "pointerdown" event when pressed down but not the "pointerup" event when released?

I'm using pointerevents rather than mouse events to be able to have a universal pointer solution, rather than having to separately consider touch vs mouse events etc. The problem is that when I press the right mouse button, the pointerdown event is…
Tom
  • 8,536
  • 31
  • 133
  • 232
2
votes
0 answers

mapbox storytelling click through div

There is a mapbox scrollytelling https://demos.mapbox.com/scrollytelling/. I need to acceess map(mouse click and mousemove), but can't access it. I have tried with pointer-events:none to parent layer(does not work for me, I applied it to almost…
SERG
  • 3,907
  • 8
  • 44
  • 89