Search code examples
javascriptcssvue.jseventspointer-events

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), when I fire pointer up, the value of this div is transferred to drag place. To target element under cloned(dragged) div on pointer up event, I used a css property pointer-events: none (on cloned div) and everything is fine on the desktop. On mobile, event targeting always dragged element.

There is console.log from triggered events: logged events

Solution

  • I found answer to my question in another question: How to find out the actual event.target of touchmove javascript event?

    We can target element under our event by

    document.elementFromPoint(
    e.clientX,
    e.clientY
);