Svelte组件将每个手指注册为单独的触摸事件。

Question

我在循环中有一个Svelte组件的实例，我希望能够同时使用多个手指独立地滑动每个Slider组件的.box元素。

下面是代码的简化版本(不能包含在REPL中)：https://github.com/dtsmarin/svelteSOexample

编辑:我认为我在这里使用苗条运动会带来比它解决更多的问题。我正在用一些更简单的东西来代替它，比如Hammer.js。无论如何，如果有人找到了解决办法，我仍然感兴趣。

Answer 1

这里的方法应该是使用指针事件，它提供了一个可以用来识别手指的pointerId。您可以使用捕捉功能来防止手指之间的干扰，并在手指松开之前继续滑动滑块，即使手指在交互过程中意外离开了滑块的区域。

示例：

<script>
  let element;
  
  let capturedPointerId = null;
  let x = 0;
  let y = 0;

  function onPointerDown(e) {
    element.setPointerCapture(e.pointerId);
    capturedPointerId = e.pointerId;
  }
  function onPointerUp(e) {
    capturedPointerId = null;
    element.releasePointerCapture(e.pointerId);
  }
  function onPointerMove(e) {
    if (capturedPointerId != e.pointerId)
      return;

    e.preventDefault();
    e.stopPropagation();

    x += e.movementX;
    y += e.movementY;
  }
</script>

<div bind:this={element}
     on:pointerdown={onPointerDown}
     on:pointerup={onPointerUp}
     on:pointermove={onPointerMove}
     style:transform="translate({x}px, {y}px)">
  {capturedPointerId}
</div>

<style>
  div {
    /* This is important to prevent panning/zooming/reload gestures. */
    touch-action: none;
  }
</style>

REPL