Question

我正在寻找一种方法来区分鼠标事件中的不同点击类型与Jquery。我最终得到了这个似乎有用的小插件。我想得到一些反馈。

主要的难点是模仿像“点击”或“mousedown”这样的DOM事件，用于鼠标右键。

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

jQuery RightClick Handler插件

1 个答案: