js怎样实现手势识别功能 移动端手势识别的4种实现方案

let startX, startY;

document.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

document.addEventListener('touchmove', (e) => {
  const x = e.touches[0].clientX;
  const y = e.touches[0].clientY;
  const deltaX = x - startX;
  const deltaY = y - startY;

  // 根据 deltaX 和 deltaY 判断手势方向
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    if (deltaX > 0) {
      console.log('向右滑动');
    } else {
      console.log('向左滑动');
    }
  } else {
    if (deltaY > 0) {
      console.log('向下滑动');
    } else {
      console.log('向上滑动');
    }
  }
});

document.addEventListener('touchend', (e) => {
  // 处理 touchend 事件
});

const element = document.getElementById('myElement');
const hammer = new Hammer(element);

hammer.on('swipeleft', function(ev) {
  console.log('向左滑动');
});

hammer.on('swiperight', function(ev) {
  console.log('向右滑动');
});

hammer.get('pinch').set({ enable: true });
hammer.get('rotate').set({ enable: true });

hammer.on("pinch", function(ev) {
  console.log(ev.scale); // 缩放比例
});

hammer.on("rotate", function(ev) {
  console.log(ev.rotation); // 旋转角度
});

element.addEventListener('pointerdown', (e) => {
  // 处理 pointerdown 事件
});

element.addEventListener('pointermove', (e) => {
  // 处理 pointermove 事件
});

element.addEventListener('pointerup', (e) => {
  // 处理 pointerup 事件
});

class GestureRecognizer extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
      </style>
      <div><slot></slot></div>
    `;

    this.startX = 0;
    this.startY = 0;

    this.addEventListener('touchstart', this._handleTouchStart);
    this.addEventListener('touchmove', this._handleTouchMove);
    this.addEventListener('touchend', this._handleTouchEnd);
  }

  _handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
  }

  _handleTouchMove(e) {
    const x = e.touches[0].clientX;
    const y = e.touches[0].clientY;
    const deltaX = x - this.startX;
    const deltaY = y - this.startY;

    // 根据 deltaX 和 deltaY 判断手势方向
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      if (deltaX > 0) {
        this.dispatchEvent(new CustomEvent('swipeRight'));
      } else {
        this.dispatchEvent(new CustomEvent('swipeLeft'));
      }
    } else {
      if (deltaY > 0) {
        this.dispatchEvent(new CustomEvent('swipeDown'));
      } else {
        this.dispatchEvent(new CustomEvent('swipeUp'));
      }
    }
  }

  _handleTouchEnd(e) {
    // 处理 touchend 事件
  }
}

customElements.define('gesture-recognizer', GestureRecognizer);

<gesture-recognizer id="myGestureElement">
  <div>This is the content</div>
</gesture-recognizer>

<script>
  const gestureElement = document.getElementById('myGestureElement');
  gestureElement.addEventListener('swipeLeft', () => {
    console.log('Gesture: Swipe Left detected on Web Component!');
  });
</script>