Question

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

您是否有任何想法，当您在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>

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

1 个答案: