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
8
votes
2 answers

pointer events on click but not on scroll

Is it possible to allow click but not scroll events? pointer-events: none; Will disable both types of inputs, I would like to disable only scroll. Any other ideas for workarounds?
edencorbin
  • 2,569
  • 5
  • 29
  • 44
7
votes
2 answers

Is there a pointer event that equals to 'click' event?

The 'click' event is a mouse event which fires after both the mousedown and mouseup events have fired. Now pointer event has a broader use case, so I wonder if there is a corresponding 'click' event for pointer event also? Thanks. Andy
Andy You
  • 101
  • 1
  • 5
7
votes
1 answer

Wait for pointer-events in Cypress by default

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. I use this property to prevent interaction with some sections of a web application for a short time while…
John_C
  • 1,116
  • 8
  • 17
7
votes
0 answers

Overwrite Shadow Content (User Agent) style in Html5 video element on iOS

I'm displaying a element on a page using the playsinline attribute to allow iOS devices to play the video without set it to fullscreen. That works well but I noticed that, with that property, the video element contains a "Shadow Content (User…
6
votes
2 answers

Pointer Event issue: pointercancel with pressure input (pen)

Thank you for your help in advance. I'm a bit stumped with an issue I am having. I am developing a web app in chrome using react and canvas. This issue seems to be a PointerEvent issue with pressure pen input. The issue: When I start to draw with my…
6
votes
2 answers

How to get same coordinates from pointer events as from touch events while viewport is zoomed?

I was trying to use pointer events (e.g. pointerdown) instead of combining touch (e.g. touchstart) and mouse (e.g. mousedown) events to figure out the input event coordinates. var bodyElement =…
6
votes
1 answer

Safari (OS X) doesn't emit pointer events on overflowing SVG contents

I need to capture pointer events click and mousemove on shapes that are outside the contents box defined via width/height, rendered via overflow: visible. In this example, the circle is rendered properly, and current Chrome, FireFox and IE11…
Robert Monfera
  • 1,980
  • 1
  • 22
  • 16
6
votes
1 answer

pointer-events: none not working in IE

I'm trying to disable the hyperlinks in my SharePoint 2013 list edit page. I used a content editor webpart and put pointer-events : none. It works fine on Google Chrome but doesn't work in IE . Is there any alternative to this? I just want the CSS…
Revenant_01
  • 81
  • 1
  • 1
  • 9
6
votes
1 answer

iframe with pointer-events: none; but with a div inside it that has pointer-events: auto;

It is possible to have an outer div with pointer-events: none; and another div inside it with pointer-events: auto;. The outer div will be transparent to click events (ie it won't react to click events but underlying html controls will) and the…
Jean-François Beauchamp
  • 5,485
  • 8
  • 43
  • 77
5
votes
1 answer

pointer events vs touch and mouse events

I'm building an interface that should work with mouse or touch. My user may have difficulty hitting their desired target because of a variety of physical issues. Pointer events seem perfect for this but I get different behavior. I want to know when…
GaryBishop
  • 3,204
  • 2
  • 23
  • 19
5
votes
1 answer

How to disable scroll of the whole page using pointer events on an element?

I've got an library that allows drawing on a canvas. Currently, it supports mouse and touch events. I'd like to add support for pointer events as well. I'm handling pointerdown, pointermove and pointerup events on the canvas element. Everything…
szimek
  • 6,404
  • 5
  • 32
  • 36
5
votes
0 answers

How to handle mouse, touch, and pointer events in Angular?

It's now 2017 and I find it a real pain to deal with all these different input methods (mouse, touch, pointers) in today's browsers. But just handling mouse events too often doesn't work out anymore when developing a HTML5/JS cross browser/platform…
Kaspar Fenner
  • 161
  • 2
  • 7
5
votes
3 answers

SVG still receives clicks, even if pointer-events: visible/painted

Basically, I have a couple .svg images put into an tag on my HTML page like that: menu All of those images are overlapping with each other. They have the same size but…
user3433651
  • 53
  • 1
  • 3
5
votes
2 answers

Disabling pointer events for inspect element

I have a div for which pointer events is set to "none". I can click through to elements underneath fine, but if I right click an element and inspect it with Chrome, it gives me the div that's on top. Does anyone else have this issue? I don't…
jshou
  • 672
  • 4
  • 19
4
votes
2 answers

no pointerenter event if you touch and then move into element

I'm trying to build a React app where a user touches one element and then moves to a neighboring element while still holding down. The pointerover and pointerenter events fire when the user touches the first element, but not when the user moves the…
skedwards88
  • 309
  • 3
  • 7
1
2
3
15 16