Question

我尝试使用mouse-rightclick来防止默认，并且它正常工作，直到我尝试打开引导模式。

如果我使用“alert”og什么都不做，那么就会阻止右键单击，但是当我打开一个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();
});

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

$("[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

bootstrap模态防止右键单击

1 个答案: