[Vuejs]-Pointer-events: none doesn't work on mobile

1👍

✅

We can target element under our event by

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

4👍

Modern mobile browsers use the ‘touch-action’ CSS property instead.
You can read all about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Just add touch-action: none; to the same element you added pointer-events: none; to.

Otherwise, depending on how you set up your vue component, you may need to listen for the ‘touchstart’ and ‘touchend’ events and cancel them:

<TargetElement>.addEventListener( 'touchstart', e => e.preventDefault )