将事件绑定到鼠标右键

时间:2009-04-01 17:47:57

标签: jquery css

如何在禁用浏览器上下文菜单后通过右键单击触发某些操作?

我试过这个。 。

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        $('.alert').fadeToggle();
        return false;
    });
});

8 个答案:

答案 0 :(得分:101)

jQuery中没有内置的oncontextmenu事件处理程序,但你可以这样做:

$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;};

  $(document).mousedown(function(e){ 
    if( e.button == 2 ) { 
      alert('Right mouse button!'); 
      return false; 
    } 
    return true; 
  }); 
});

基本上我取消DOM元素的oncontextmenu事件来禁用浏览器上下文菜单,然后用jQuery捕获mousedown事件,你可以在事件参数中知道按下了哪个按钮。

您可以尝试以上示例here

答案 1 :(得分:48)

该功能太早返回。我在下面的代码中添加了评论:

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
        $('.alert').fadeToggle(); // this line never gets called
    });
});

尝试使用下一行交换return false;

答案 2 :(得分:15)

只需使用事件处理程序。这样的事情应该有效:

$('.js-my-element').bind('contextmenu', function(e) {
     e.preventDefault();
     alert('The eventhandler will make sure, that the contextmenu dosn't appear.');
});

答案 3 :(得分:2)

我在这里找到了这个答案,我正在使用它。

我的图书馆代码:

$.fn.customContextMenu = function(callBack){
    $(this).each(function(){
        $(this).bind("contextmenu",function(e){
             e.preventDefault();
             callBack();
        });
    }); 
}

我页面脚本中的代码:

$("#newmagazine").customContextMenu(function(){
    alert("some code");
});

答案 4 :(得分:1)

document.oncontextmenu = function() {return false;}; //disable the browser context menu
$('selector-name')[0].oncontextmenu = function(){} //set jquery element context menu 

答案 5 :(得分:0)

contextmenu是一个事件吗?

我会使用onmousedownonclick然后抓住MouseEvent按钮属性来确定按下了哪个按钮(0 =左,1 =中,2 =对)。

答案 6 :(得分:0)

要在页面的所有图像上禁用右键单击上下文菜单,只需执行以下操作:

jQuery(document).ready(function(){
    // Disable context menu on images by right clicking
    for(i=0;i<document.images.length;i++) {
        document.images[i].onmousedown = protect;
    }
});

function protect (e) {
    //alert('Right mouse button not allowed!');
    this.oncontextmenu = function() {return false;};
}

答案 7 :(得分:0)

.contextmenu 方法: -

尝试以下

<div id="wrap">Right click</div>

<script>
$('#wrap').contextmenu(function() {
  alert("Right click");
});
</script>

.mousedown 方法: -

$('#wrap').mousedown(function(event) {

        if(event.which == 3){
            alert('Right Mouse button pressed.');
        }  
});