React移动端Video组件onClick事件失效问题求助

问题原因 #

移动端浏览器对<video>元素的触摸交互有默认处理逻辑（比如点击触发播放/暂停），这会导致自定义的onClick事件被浏览器的默认行为拦截，无法正常触发；而桌面端不存在这个交互冲突，所以onClick能正常工作。

解决方案 #

方案1：通过父容器代理onClick事件 #

给<video>套一层父容器，将onClick事件绑定在父容器上。父容器不会被<video>的默认触摸行为干扰，能在桌面和移动端统一触发事件：

import "./styles.css";

export default function App() {
  const handleClick = () => {
    console.log("test");
    // 这里添加弹窗打开逻辑
  };

  return (
    <div className="App">
      <div onClick={handleClick} style={{ position: "relative", display: "inline-block" }}>
        <video
          width="320"
          height="240"
          controls
          src="https://www.w3schools.com/html/mov_bbb.mp4"
        />
      </div>
    </div>
  );
}

方案2：阻止默认触摸事件（谨慎使用） #

如果不需要保留<video>的原生触摸交互（比如自定义播放控制），可以在onTouchEnd中阻止默认行为，让onClick能正常触发：

import "./styles.css";

export default function App() {
  const handleClick = () => {
    console.log("test");
    // 这里添加弹窗打开逻辑
  };

  const handleTouchEnd = (e) => {
    e.preventDefault();
  };

  return (
    <div className="App">
      <video
        width="320"
        height="240"
        controls
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        onClick={handleClick}
        onTouchEnd={handleTouchEnd}
      />
    </div>
  );
}

注意：这个方法会禁用<video>的原生触摸播放/暂停功能，需根据业务场景选择。

验证方法 #

• 打开开发者工具，桌面视图点击video或父容器，控制台输出test；
• 切换到移动端视图，点击后控制台正常输出test，弹窗逻辑可正常执行。

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