Trying touch-action: none.

Trying touch-action: none in different elements of a page...

by David Iglesias

HTML

<div class="another">
  <div id="eventTarget" class="pretty"></div>
</div>

CSS

.pretty { border: 2px solid red; border-radius: 5px; min-height: 20px; min-width: 20px; }


.pretty { touch-action: none; }
/* .another { touch-action: none; }*/

JavaScript

eventTarget.addEventListener('touchstart', (e) => {
  console.log('non-passive event listener!');
});

eventTarget.addEventListener('pointerdown', (e) => {
  console.log('down');
  e.target.setPointerCapture(e.pointerId);
});

eventTarget.addEventListener('pointermove', (e) => {
 console.log(e.x, e.y);
});

eventTarget.addEventListener('pointerup', (e) => {
  console.log('up');
});

eventTarget.addEventListener('pointercancel', (e) => {
  console.log('CANCEL!!');
});