1

jQuery を使用してマウス イベントのさまざまなクリック タイプを区別する方法を探しています。私はこの小さなプラグインがうまくいくようになりました。私はそれについていくつかのフィードバックを得たいと思います。

主な困難は、マウスの右ボタンのようclickなDOM イベントをエミュレートすることでした。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);
4

1 に答える 1

2

これを試して：

$(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; 
  }); 
});

jsフィドル

于 2013-05-14T12:57:17.497 に答える