Stack Overflow
Stack Overflow

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
152
votes
7 answers

Is there a `pointer-events:hoverOnly` or similar in CSS?

Just been playing about with pointer-events property in CSS. I have a div that I want to be invisible to all mouse events, except for :hover. So all click commands go through the div to the one below it, but the div can report whether the mouse is…
Jimmery
  • 9,783
  • 25
  • 83
  • 157
56
votes
1 answer

`pointermove` event not working with touch. Why not?

I have this pen: https://codepen.io/anon/pen/eyKeqK If you try it on a touch-screen device (f.e. visit the pen on your phone) you'll notice that when you drag, the white light (the little sphere) only moves for a tiny bit then it stops working. The…
trusktr
  • 44,284
  • 53
  • 191
  • 263
27
votes
4 answers

CSS Pointer Events – Accept Drag, Reject Click

tldr; I need an element to register drag and drop pointer events, but pass click and other pointer events to elements behind it. I am building a drag and drop photo upload feature in react using react-dropzone. I want the dropzone to be over the…
Matt Cooper
  • 2,042
  • 27
  • 43
21
votes
1 answer

No pointer events on Modal

Is there a way to set pointerEvents to none on a Modal? I'm trying to render a child view outside its parents bounds and the only way I could do this is by using a Modal. Ignoring pointerEvents on the child doesn't seem to work.
Anshuul Kai
  • 3,876
  • 2
  • 27
  • 48
14
votes
1 answer

Setting pointer-events dynamically on iOS 15 Safari is unreliable and unpredictable

In Safari on iOS 15, links that are in a container that has pointer-events: none; applied, don't become tappable when pointer-events is set to all dynamically at a later stage. Actually, in some cases they do, but it's very unpredictable. For…
Senne
  • 455
  • 3
  • 11
14
votes
2 answers

Touch Move event don't fire after Touch Start target is removed

I'm trying to implement a drag-like functionality using the next pattern: Subscribe to marker Pointer Down event. When Down event fires subscribe to Window Pointer Move and Up events and remove marker. Perform some actions while Move. When Up event…
Alexander Shutau
  • 2,660
  • 22
  • 32
13
votes
10 answers

Show dropdown-menu on hover and close on click using only CSS

Can someone help me with an explanation as to why the links from a dropdown menu are not working when I click on them? Maybe because of pointer events? I'm trying to have a dropdown menu that is closing after a link is clicked or the close button is…
RulerNature
  • 693
  • 4
  • 13
  • 40
11
votes
2 answers

How to disable all mouse events except click?

I want to disable all mouse events except click, I have this: .info { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); width: 100%; height: 100%; padding: 20px; position: absolute; top:…
ნიკა ბერიძე
  • 113
  • 1
  • 1
  • 6
11
votes
3 answers

What is -ms-touch-action called in other browsers?

What is the equivalent to -ms-touch-action for other browsers?
Jonathan Allen
  • 68,373
  • 70
  • 259
  • 447
10
votes
1 answer

Prevent click when using pointer events in IE11?

I'm developing a JavaScript application that has to run on both IE11 and Edge. In IE11, the event chain I'm seeing (copied from https://patrickhlauke.github.io/touch/tests/results/) is the following: pointerover > mouseover > pointerenter >…
sean christe
  • 879
  • 2
  • 7
  • 24
10
votes
4 answers

How can I pass ONLY clicks through a SVG with pointer-events?

I have a SVG overlaying a div with a button. I know that i can pass mouse-events through the SVG by setting "pointer-events: none;" for my SVG. However when I do this the SVG wont recognize mouse-events anymore.
ephtron
  • 1,115
  • 1
  • 10
  • 16
9
votes
0 answers

Access xinput events, particularly pen pressure, in Electron

I've been searching for a cross platform api to read multitouch and pen/stylus input for Node.JS using Electron. I've tested Pointer Events Polyfill, which fails to detect pressure on my tablet pc (Thinkpad Yoga) for both Windows 10 and ArchLinux…
Cyrusc
  • 163
  • 1
  • 10
9
votes
2 answers

Detecting Mouse Events on Multiple Overlapping SVG Elements

I'm trying to detect mousemove events on partially overlapping SVG elements, as in this image fiddle
Micha Schwab
  • 786
  • 1
  • 6
  • 21
9
votes
4 answers

IE 11 Pointer Events Override

I am trying to override the pointer-events property for a containing div. It works in everything so far except IE 11. Supposedly, the pointer-events property was added to IE 11. For some reason, it won't override though. .divstyle { …
wayofthefuture
  • 8,339
  • 7
  • 36
  • 53
8
votes
2 answers

Stop pointercancel event from firing without disabling touch scrolling on Chrome Android?

I have a bunch of child divs in a scrollable area, something like this:
...
I listen to pointerdown events on each child, and when one fires, I…
user1031947
  • 6,294
  • 16
  • 55
  • 88
1
2 3
…
15 16