javascript - jQuery RightClick 处理程序插件

Question

我正在寻找一种使用 jQuery 区分鼠标事件中不同点击类型的方法。我最终得到了这个似乎可以工作的小插件。我想就此获得一些反馈。

主要的困难是模拟 DOM 事件，如鼠标右键的 click 或 mousedown。

if(jQuery) (function(){
    
    $.extend($.fn, {
        
        rightClick: function(handler) {
            $(this).each( function() {
                $(this).on("rightclick", function(e,event) {
                    handler(event);
                });
            });
            return $(this);
        },      
        
        rightMouseDown: function(handler) {
            $(this).each( function() {
                $(this).on("rightmousedown",function(e,event) {
                    handler(event);
                });
            });
            return $(this);
        },
        
        rightMouseUp: function(handler) {
            $(this).each( function() {
                $(this).on("rightmouseup",function(e,event) {
                    handler(event);
                });
            });
            return $(this);
        },
                
        leftClick: function(handler) {
            $(this).each( function() {
                $(this).on("leftclick", function(e,event) {
                    handler(event);
                });
            });
            return $(this);
        },      
        
        leftMouseDown: function(handler) {
            $(this).each( function() {
                $(this).on("leftmousedown",function(e,event) {
                    handler(event);
                });
            });
            return $(this);
        },
        
        leftMouseUp: function(handler) {
            $(this).each( function() {
                $(this).on("leftmouseup",function(e,event) {
                    handler(event);
                });
            });
            return $(this);
        },
        
        noContext: function() {
            $(this).each( function() {
                $(this)[0].oncontextmenu = function() {
                    return false;
                }
            });
            return $(this);
        }
        
    });
    $(document).on({
        click:function(e){
            $(e.target).trigger("leftclick",e);
            e.stopPropagation();
        },
        mousedown:function(e){
            if(e.button == 0){
                $(e.target).trigger("leftmousedown",e);
            }
            if(e.button == 2){
                $(e.target).trigger("rightmousedown",e);
            }
            e.stopPropagation();
        },
        mouseup:function(e){
            if(e.button == 0){
                $(e.target).trigger("leftmouseup",e);
            }
            if(e.button == 2){
                $(e.target).trigger("rightmouseup",e);
            }
            e.stopPropagation();
        },
        contextmenu:function(e){
            $(e.target).trigger("rightclick",e);
            e.stopPropagation();
            return false;
        }
    },"*");
})(jQuery); 

Answer 1

试试这个:

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

  $(document).mousedown(function(e){ 
    if( e.button == 2 ) { //2 for Right Click, 3 for mouse wheel click
      alert('Right mouse button!'); 
      return false; 
    } 
    return true; 
  }); 
});

jsFiddle