Support @touchmove.passive.false

[hirasso]

Hi there!

TIL I learned that the touchmove event is passive by default. In some cases, it's necessary to explicitly make a touchmove event non-passive, to be able to later call preventDefault() on it. (For example to prevent vertical scrolling when scrolling a slider...looking at you, iOS Safari 😄)

Currently, there is a way to tell x-on to make an event handler passive (related merged PR: #619).

The implementation looks for a passive modifier and simply sets {passive: true} if it finds one.

I propose to expand on the current behavior like so:

<!-- make a touchmove event cancellable, e.g. allow e.preventDefault() on it -->
<div x-on:touchmove.document.passive.false="console.log($event.cancelable)"></div>

So it would be possible to do all of these:

• both .passive and .passive.true makes a handler passive explicitely
• .passive.false makes the handler non passive

Happy to create a PR if you accept any.

[SimoTod]

For the scrolling thing, you can also use the CSS property touch-action: none; on the relevant area which is likely more performant than JS.

[hirasso]

That won't do as I want the document to stay scrollable vertically if I haven't moved the slider by at least 3 pixels horizontally

[hirasso]

Actually... it does do! 🥳 Lucky for me it seems like setting touch-action dynamically is working on ios safari! Who would have though that...

bindings: {
  "@touchstart.document.capture": "onTouchStart",
  "@touchmove.document.capture": "onTouchMove",
  "@touchend.document": "onTouchEnd",
},

onTouchStart(e: TouchEvent) {
  const target = e.target as HTMLElement;
  this.touching = this.$root.contains(target);

  this.touchStartCoords = {
    x: e.touches[0].pageX,
    y: e.touches[0].pageY,
  };
},

onTouchEnd(e: TouchEvent) {
  this.touching = false;
  gsap.set(this.viewport, {
    touchAction: "",
  });
},

onTouchMove(e: TouchEvent) {
  const { cancelable } = e;
  const { touching } = this;

  if (!touching) return;

  const moveVector = {
    x: e.touches[0].pageX - this.touchStartCoords.x,
    y: e.touches[0].pageY - this.touchStartCoords.y,
  };

  if (Math.abs(moveVector.x) > 3) {
    // @see https://github.com/alpinejs/alpine/discussions/4403
    gsap.set(this.viewport, {
      touchAction: "pan-x",
    });
  }
},

[SimoTod]

Nice!
You can still send a PR, if you like. It was just because they usually take a little bit before being reviewed, merged and released, and you probably need a solution sooner rather than later.