javascript - 禁用视频元素上的上下文菜单

Question

下面代码的目的是禁用视频容器元素上的鼠标右键单击和上下文菜单(客户请求)。然而，它似乎也取消了我们启动视频所需的左键单击。

我如何编码才能仅禁用右键单击。

$(document).ready(function () {
    $('.video-container').bind('contextmenu',  function () { return false; });
});

HTML 是:

        <div class="video-container" data-videoname="" data-flash="http://yyy.net/video1.flv">
            <video id="flashContent" width="944" height="531" controls="controls">
                <source src="http://yyy.net/video1.mp4" type="video/mp4">
                <source src="http://yyy.net/video1.ogv" type="video/ogg">
            </video>
            <div class="poster">
                <div class="content">
                    <img src="/media/es-es/121111/different.png" width="944" height="531">
                    <img class="button" alt="Play this video" src="../../images/buttons/icon_video_play.png">
                </div>
            </div>
        </div>

Answer 1

您可以使用 jQuery 中的 event.which 检查鼠标右键是否被单击。1 代表鼠标左键，2 代表鼠标中键，3 代表鼠标右键。

尝试在单击右键时绑定(bind)您的contextmenu覆盖函数，否则取消绑定(bind)。我认为这应该可以解决问题。

$(document).ready(function () {
   $('.video-container').mousedown(function(event) {
      if(event.which === 3) {
         $('.video-container').bind('contextmenu',function () { return false; });
       }
       else {
         $('.video-container').unbind('contextmenu');
       }
   });
});