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
0
votes
3 answers

Adding a link inside scrolling popup disables all click events?

I have a popup I've created in d3.js, where it's basically a Div that I scale to 1 on a click-event, and scale to 0 on a second click event anywhere else (i.e. click-off event). Without being able to post all the code in a reproducible example,…
DiamondJoe12
  • 1,879
  • 7
  • 33
  • 81
0
votes
1 answer

pointer-events: none is not working on contenteditable element

I have a parent div element in which the pointer-events is none. inside this div there's a span in which its contenteditable attribute is true, but I still can edit the span element content on Chrome, while the pointer-events for parent div is…
Nasrin
  • 157
  • 2
  • 9
0
votes
2 answers

div class overlays on video container, preventing it from being clicked

.split-wrap is blocking the middle of the video from being clicked on. Click on the play image, it opens up, then try clicking in the middle of the YouTube video, it's not able to be clicked. How is that fixed so it is able to be…
user6502278
0
votes
1 answer

Material ui expansion panel can't click custom buttons within it

Within a 's description I have 3 icons acting as buttons. The icons are displayed but they can not be clicked, basically they are under the expansion panel. z-index approaches don't work. A solution that I found was to give the…
0
votes
1 answer

how to make pixi js mask filter respond to touch on mobile view as it does to pointer move in desktop view?

I want the flash light effect to follow mobile touch events in pixi js I am trying to make the pixijs mask filter responsive as the flash light effect follows the mouse pointer , so i need to make it follow the touch events.Here's the link of the…
0
votes
2 answers

Why doesn't my anchor navigate in the dropdown?

In CSS #lang-dropdown-button:focus should set pointer-events: all in #router-list , but it seems it doesn't work. The anchor doesn't navigate to the German on the dropdown. Why is that so? *{ margin: 0px; padding: 0px; …
Igor
  • 28
  • 4
0
votes
0 answers

Pointer-events only disabled on desktop

Via CSS I disabled the pointer-events. However, on mobile I want to activate it. My attempt: .videoContainer { pointer-events: none; } @media only screen and (max-width: 600px) { .videoContainer { pointer-events: all; …
0
votes
1 answer

Sibling fade class expanding beyond container

Class of .sibling-fade is applying correctly on hover of the selected
  • element, however, it is being applied before the mouse enters the bordered area. Please see GIF below for an example. Example GIF HTML ul { margin: 0px; padding:…
  • Serene
    • 31
    • 8
    0
    votes
    1 answer

    touch-action behavior when gesture begins in textarea or input

    It seems like when a gesture begins in textarea or input, touch-action is ignored. This is unexpected for me. Expected behavior: touch-action is taken into account and e.g. scrolling does not happen (see demo below). Demo:…
    Max
    • 83
    • 5
    0
    votes
    0 answers

    How to allow clicks to affect an element in addition to the elements below it?

    I know that the CSS pointer-events: none; makes elements beneath clickable. But it disables clicks on the top element. How can I have a single click affect the entire "stack" of elements? Or at least, the element in question, as well as the element…
    GirkovArpa
    • 4,427
    • 4
    • 14
    • 43
    0
    votes
    2 answers

    how to make icon within button work like the button ( pointer events: none; doesn't work)

    this is a todolist that should delete when the button is clicked. it has an icon within. It deletes when button is clicked but nothing happens when icon is clicked. i have tried adding (!important) to the pointer events but it wont let the icon take…
    Ani
    • 1
    • 1
    0
    votes
    0 answers

    Need to use pointer-events but clashes with other elements

    I'm creating following website: www.melkerhei.be/smeltkroes/index.html On the desktop version, everything is fine. But when optimizing the mobile version I faced a problem that I can't solve. Thinks that should work together (on mobile): The top…
    sg_sg94
    • 2,248
    • 4
    • 28
    • 56
    0
    votes
    2 answers

    Pointer-events: none doesn't work on mobile

    I'm working on custom drag and drop module to Vue and I found a problem. To override browser D&D (because I need) on pointer down I'm cloning div which I want to drag and then trigger pointermove (on this event, I'm setting X and Y on cloned div),…
    bboysokol
    • 21
    • 1
    • 3
    0
    votes
    1 answer

    Cordova app in ios13 device behaves weird with click or swipe actions

    I have a cordova app. I have written some custom code in file for swipe actions using touch events, mouse events which will identify the touchmove and swipe. I have a hamburger menu at the top left corner of my app. On clicking this will open a side…
    bvakiti
    • 3,243
    • 4
    • 17
    • 26
    0
    votes
    1 answer

    'disable' does not prevent 'onpointerup' event. Is there an 'onclick' equivalent using Pointer Events?

    Using the 'disabled' css property does not prevent 'onpointerup' events from being handled by the associated function. What is the best way to achieve 'onclick' functionality (specifically that event handlers are not dispatched for 'onclick' when…
    oclyke
    • 351
    • 1
    • 3
    • 12