javascript - 用于检测视频点击的跨浏览器解决方案？

Question

我正在使用 JQuery 创建一个“编辑器”。当我单击视频元素时，它应该显示我的菜单 div。但它在 Firefox 上不起作用，它似乎没有对我应用到它的点击事件代码使用react。

当您在 Firefox 上点击我的视频时，有什么想法可以让我的菜单显示出来吗？

$(document).ready(function() {
  $('.my-widget').click(function() {
    $('.my-menu').toggle();
  });
});

body {
  text-align: center;
}
.my-widget * {
  width: 200px;
  height: auto;
}
.my-menu {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
  text-align: center;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="my-menu">
<p>menu</p>
</div>
 
<div class="my-widget">
  <video controls="controls"><source src="https://storage.coverr.co/videos/Empire?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTc5MTUyMTk3fQ.C3WW6q97qHYspm5Hjn10mfbYCAfdR9jkm81QtNI2mF4"></video>
</div>

<div class="my-widget">
  <img src="https://images.pexels.com/photos/3445716/pexels-photo-3445716.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>

<p>Click the image or video to toggle the menu</p>

Answer 1

因为当用户点击MediaElements的控件时浏览器确实会暴露，所以你需要删除controls来自 <video> 的属性元素:

<video controls="controls"><source="..."></video>