在JavaScript中检测点击和触摸

Question

我知道你可以检测浏览器是否在触摸屏设备上运行，就像这个答案所示：https://dev59.com/y2445IYBdhLWcg3wg6tm#4819886

但是，我知道有些设备既有触摸屏也有鼠标。我能否区分这些类型的触摸？本质上，我想区分3种不同的事件：onClick（点击或触摸时触发），onTouch（仅在触摸时触发），onMouseClick（仅在点击时触发）。

- Dara Java

---

请查看PointerEvent上的pointerType。 - Randy Casburn

Answer 1

你可以使用 PointerEvent 的 pointerType 属性 来检测输入类型（"mouse"、"touch" 或 "pen"）：

element.addEventListener('pointerdown', (event) => {
  if (event.pointerType === "mouse") {}
  if (event.pointerType === "touch") {}
  if (event.pointerType === "pen") {}
});

如果你想为每种类型的点击事件设置特定的事件，你可以创建自定义事件。

const mouse = new Event("mouseclick");
const touch = new Event("touch");
document.addEventListener("pointerdown", ({ pointerType, target }) => {
  if (pointerType === "mouse") target.dispatchEvent(mouse);
  if (pointerType === "touch") target.dispatchEvent(touch);
});

const someElement = document.querySelector(".box");
someElement.addEventListener("mouseclick", () => {
  console.log("Clicked with mouse");
});
someElement.addEventListener("touch", () => {
  console.log("Touched with mobile device");
});
someElement.addEventListener("click", () => {
  console.log("Clicked by some device (we don't know)");
});

.box {
  position: absolute;
  inset: 2em;
  background: darkred;
  padding: 1em;
}

<div class="box">A box with custom events</div>

（注：未在触摸屏设备上测试）

请注意，如果您正在使用React或其他框架，则可能有不同的方法来创建自定义事件。

例如，在React中，您可以使用可重用函数来实现这些事件：

const clickEvents = ({ onMouseClick, onTouch, onClick }) => ({
  onClick,
  onPointerDown({ pointerType }) {
    if (pointerType === "mouse") onMouseClick(); 
    if (pointerType === "touch") onTouch(); 
  },
});
function SomeComponent({ onClick, onMouseClick, onTouch, children }) {
  const clickEventProps = clickEvents({ onClick, onMouseClick, onTouch });
  return (
    <div className="something" {...clickEventProps}>
      <p>Custom events on this thing</p>
      {children}
    </div>
  );
}

- Jacob

---

click和dblclick事件有类似的东西吗？ - Lampe2020