鼠标，触摸，指针事件

2023-01-26

字数统计: 535 | 阅读时长≈ 2 分钟

触摸事件

Safari 不支持 Touch 事件

模拟一个触摸事件

// 获取按钮元素
var button = document.getElementById("myButton");

// 创建一个触摸点
var touch = new Touch({
  identifier: Date.now(),
  target: button,
  clientX: 50, // X坐标
  clientY: 50, // Y坐标
  radiusX: 2.5,
  radiusY: 2.5,
  rotationAngle: 10,
  force: 0.5,
});

// 创建一个触摸事件
var touchEvent = new TouchEvent("touchstart", {
  cancelable: true,
  bubbles: true,
  touches: [touch],
  targetTouches: [],
  changedTouches: [touch],
  shiftKey: true,
});

button.dispatchEvent(touchEvent);

指针事件历史

chrome 55 版本之前，同时期浏览器浏览器都只有 MouseEvent, 然而，近年来的新兴设备支持更多不同方式的指针定点输入，如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型，以有效追踪各类指针事件。

PointerEvent 接口继承了所有 MouseEvent 中的属性，以保障原有为鼠标事件所开发的内容能更加有效的迁移到指针事件。

不同事件对应表

MouseEvent	TouchEvent	PointerEvent
mousedown	touchstart	pointerdown
mousemove	touchmove	pointermove
mouseup	touchend	pointerup
	touchcancel	pointercancel
mouseenter		pointerenter
mouseleave		pointerleave
mouseover		pointerover
mouseout		pointerout
		gotpointercapture
		lostpointercapture

setPointerCapture

用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放

通常用于实现，在元素外拖动的时候让元素保持响应

<body>
  <div id="slider">SLIDE ME</div>
  <script>
    function beginSliding(e) {
      slider.onpointermove = slide;
      slider.setPointerCapture(e.pointerId);
    }

    function stopSliding(e) {
      slider.onpointermove = null;
      slider.releasePointerCapture(e.pointerId);
    }

    function slide(e) {
      slider.style.transform = `translate(${e.clientX - 70}px)`;
    }

    const slider = document.getElementById("slider");

    slider.onpointerdown = beginSliding;
    slider.onpointerup = stopSliding;
  </script>
</body>

event.pointerType

用于区分各类设备，以兼容不同的事件类型.

mouse 鼠标触发的事件
pen 笔或手写笔设备
touch 手指等触摸事件

多指触控

// 通过id区分
document.onpointerdown = (e) => {
  console.log(e.pointerId);
};

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！