JS/React中是否存在类onClick的按下阶段通用事件？解决多输入冲突

问题背景 #

Chrome 中onClick事件会在鼠标释放、触摸抬起或元素聚焦时按下Enter/Space键时触发，但我们需要一个在按下阶段触发的通用事件——类似游戏引擎里的按下操作，同时要避免触摸和鼠标事件重复触发的问题（比如触摸屏笔记本或移动端模拟中，触摸操作会同时触发touchstart和mousedown）。

核心解决方案 #

通过统一处理鼠标、触摸、键盘的按下事件，同时加入重复事件过滤逻辑，封装成可复用的工具函数或自定义事件。

实现思路 #

• 过滤重复事件：触摸触发后会在短时间内触发对应鼠标事件，用标记位跳过后续的重复鼠标事件。
• 兼容键盘操作：匹配onClick对应的键盘触发逻辑——元素聚焦时按下Enter或Space键。
• 封装复用：把逻辑打包成工具函数或自定义事件，方便在多个元素上使用。

代码示例1：封装onPress工具函数 #

function onPress(element, handler) {
  let isTouchHandled = false;

  // 处理触摸按下
  element.addEventListener('touchstart', (e) => {
    isTouchHandled = true;
    handler(e);
    // 可选：阻止默认行为，避免触发后续鼠标事件（会影响滚动等，按需开启）
    // e.preventDefault();
  }, { passive: false });

  // 处理鼠标按下
  element.addEventListener('mousedown', (e) => {
    if (isTouchHandled) {
      isTouchHandled = false;
      return;
    }
    handler(e);
  });

  // 处理键盘按下（匹配onClick的键盘触发规则）
  element.addEventListener('keydown', (e) => {
    if ((e.key === 'Enter' || e.key === ' ') && e.target === element) {
      handler(e);
    }
  });
}

// 使用方式
const myButton = document.getElementById('action-btn');
onPress(myButton, (event) => {
  console.log('按下操作触发', event.type);
  // 这里写你的业务逻辑
});

代码示例2：自定义press事件 #

如果更倾向于浏览器原生事件的使用方式，可以封装自定义事件：

function setupPressEvent(element) {
  let isTouchHandled = false;

  const dispatchPress = (originalEvent) => {
    element.dispatchEvent(new CustomEvent('press', {
      detail: originalEvent,
      bubbles: true,
      cancelable: true
    }));
  };

  element.addEventListener('touchstart', (e) => {
    isTouchHandled = true;
    dispatchPress(e);
  }, { passive: false });

  element.addEventListener('mousedown', (e) => {
    if (isTouchHandled) {
      isTouchHandled = false;
      return;
    }
    dispatchPress(e);
  });

  element.addEventListener('keydown', (e) => {
    if ((e.key === 'Enter' || e.key === ' ') && e.target === element) {
      dispatchPress(e);
    }
  });
}

// 使用方式
const myButton = document.getElementById('action-btn');
setupPressEvent(myButton);
myButton.addEventListener('press', (event) => {
  console.log('自定义press事件触发', event.detail.type);
});

注意事项 #

• 焦点管理：键盘触发需要元素可聚焦，比如<button>、<a>自带聚焦能力，普通<div>可以添加tabindex="0"属性。
• 默认行为控制：如果调用e.preventDefault()阻止触摸事件的默认行为，会避免触发后续鼠标事件，但可能影响页面滚动、缩放等，需根据场景调整。
• 事件冒泡：如果需要阻止事件向上冒泡，可以在事件处理函数中调用event.stopPropagation()。

内容的提问来源于stack exchange，提问作者John Miller