javascript - Bootstrap 模式阻止右键单击

Question

我尝试在鼠标右键单击时阻止默认，它工作正常，直到我尝试打开 Bootstrap 模式。

如果我使用“alert”而不执行任何操作，则右键单击将被阻止，但当我打开 Bootstrap 模式时，它不会被阻止。我尝试用谷歌搜索，但找不到答案。

    $(".timer").on("contextmenu", function(evt) {evt.preventDefault();});

    $(".timer").mousedown(function(e){
        // $(".timer").bind('contextmenu', function(){ return false });
        e.preventDefault();

        if( e.button == 2 ) { 
            e.preventDefault();
            $('#changeTime').modal('show'); // rightclick is NOT prevented.
            // alert('Hello'); // this works...?
            return false; 
        } 
        return true; 
    });

有人可以帮我吗？谢谢。

PHP 是:

    echo '<td class="description" name="id' . $todos->id . '">
    <span class="descriptionText'.$todos->id.'">'
     . $todos->description . '</span></td><td style="width:50px;">
     <span class="timer pull-right btn btn-primary" name="id'.$todos->id.'">
     ' . show_time($todos->total_time) . '</span></td></tr>';

HTML 模式是:

    <div class="modal fade" id="changeTime" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Change time</h4>
          </div>
          <div class="modal-body">
                <form>
                    // A lot of HTML :)
                </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

Answer 1

因此，根据下面的评论，我认为我应该更新我的答案。

您想要忽略默认点击并允许使用右键单击来显示模式。

为了实现这一点，您需要使用 preventDefault() 和 stopPropagation() 阻止默认点击执行的所有操作

$("[data-toggle='modal']").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
});

之后你想将模态打开功能绑定(bind)到右键单击事件，但不显示上下文菜单。

$("[data-toggle='modal']").on("contextmenu", function(e) {
    e.preventDefault(); // don't show the context menu
    $("#changeTime").modal("show"); // show the modal window
})

Here's a CodePen of it working