`pointermove` event not working with touch. Why not?

Question

On the MDN documentation page about pointermove, there’s this line:

The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action.

_{source, emphasis mine}

After a short period of time, the (mobile) browser will claim the pointermove event for “native” behavior like panning the page.

The designed, simple solution is to use the css property touch-action and set it to none on the container that has the event handler.

Here’s the css property added to your codepen: https://codepen.io/anon/pen/XVBMvL

Or in a simplified example:

Set your browser to emulate touch (in Chrome, dev. tools > Sensors > Touch)
Start an interaction in the left part, and the dot will follow your finger
Start an interaction in the right part, and you’ll notice it will quickly fail like in the provided example

var dot = document.querySelector(".dot")
document.body.addEventListener("pointermove", function(ev) {
  dot.style.transform = `translate3d(${ev.clientX}px, ${ev.clientY}px, 0)`;

}, false);

* { margin: 0; padding: 0 }

.wrapper { 
  display: flex; 
  height: 100vh;
}

.hasTouchAction, 
.noTouchAction {
  flex-grow: 1;
  text-align: center;
  background: #efefef;
}

.hasTouchAction {
  touch-action: none;
}

.noTouchAction {
  background: #ccc;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: -8px;
  left: -8px;
}

<div class="wrapper">
  <div class="hasTouchAction">
    With <code>touch-action: none</code>
  </div>

  <div class="noTouchAction">
    Without <code>touch-action</code>
  </div>
</div>

<div class="dot"></div>

Make sure you don’t break important things and hurt accessibility. Also spend some time to investigate browser support. This worked for me with touch emulated events in Chrome, but might not work in every browser…

Leave a Comment Cancel reply