How to distinguish between left and right mouse click with jQuery

后端 未结 17 2701
独厮守ぢ
独厮守ぢ 2020-11-21 22:36

How do you obtain the clicked mouse button using jQuery?

$(\'div\').bind(\'click\', function(){
    alert(\'clicked\');
});

this is trigger

相关标签:
17条回答
  • 2020-11-21 22:42
    $(document).ready(function () {
        var resizing = false;
        var frame = $("#frame");
        var origHeightFrame = frame.height();
        var origwidthFrame = frame.width();
        var origPosYGrip = $("#frame-grip").offset().top;
        var origPosXGrip = $("#frame-grip").offset().left;
        var gripHeight = $("#frame-grip").height();
        var gripWidth = $("#frame-grip").width();
    
        $("#frame-grip").mouseup(function (e) {
            resizing = false;
        });
    
        $("#frame-grip").mousedown(function (e) {
            resizing = true;
        });
        document.onmousemove = getMousepoints;
        var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
        function getMousepoints() {
            if (resizing) {
                var MouseBtnClick = event.which;
                if (MouseBtnClick == 1) {
                    scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
                    scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
                    mousex = event.clientX + scrollLeft;
                    mousey = event.clientY + scrollTop;
    
                    frame.height(mousey);
                    frame.width(mousex);
                }
                else {
                    resizing = false;
                }
            }
            return true;
    
        }
    
    
    });
    
    0 讨论(0)
  • 2020-11-21 22:44

    Edit: I changed it to work for dynamically added elements using .on() in jQuery 1.7 or above:

    $(document).on("contextmenu", ".element", function(e){
       alert('Context Menu event has fired!');
       return false;
    });
    

    Demo: jsfiddle.net/Kn9s7/5

    [Start of original post] This is what worked for me:

    $('.element').bind("contextmenu",function(e){
       alert('Context Menu event has fired!');
       return false;
    }); 
    

    In case you are into multiple solutions ^^

    Edit: Tim Down brings up a good point that it's not always going to be a right-click that fires the contextmenu event, but also when the context menu key is pressed (which is arguably a replacement for a right-click)

    0 讨论(0)
  • 2020-11-21 22:44

    You can also bind to contextmenu and return false:

    $('selector').bind('contextmenu', function(e){
        e.preventDefault();
        //code
        return false;
    });
    

    Demo: http://jsfiddle.net/maniator/WS9S2/

    Or you can make a quick plugin that does the same:

    (function( $ ) {
      $.fn.rightClick = function(method) {
    
        $(this).bind('contextmenu rightclick', function(e){
            e.preventDefault();
            method();
            return false;
        });
    
      };
    })( jQuery );
    

    Demo: http://jsfiddle.net/maniator/WS9S2/2/


    Using .on(...) jQuery >= 1.7:

    $(document).on("contextmenu", "selector", function(e){
        e.preventDefault();
        //code
        return false;
    });  //does not have to use `document`, it could be any container element.
    

    Demo: http://jsfiddle.net/maniator/WS9S2/283/

    0 讨论(0)
  • 2020-11-21 22:49
    $("body").on({
        click: function(){alert("left click");},
        contextmenu: function(){alert("right click");}   
    });
    
    0 讨论(0)
  • 2020-11-21 22:50
    $.fn.rightclick = function(func){
        $(this).mousedown(function(event){
            if(event.button == 2) {
                var oncontextmenu = document.oncontextmenu;
                document.oncontextmenu = function(){return false;};
                setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
                func(event);
                return false;
            }
        });
    };
    
    $('.item').rightclick(function(e){ 
        alert("item");
    }); 
    
    0 讨论(0)
  • 2020-11-21 22:51

    To those who are wondering if they should or not use event.which in vanilla JS or Angular : It's now deprecated so prefer using event.buttons instead.

    Note : With this method and (mousedown) event:

    • left click press is associated to 1
    • right click press is associated to 2
    • scroll button press is associated with 4

    and (mouseup) event will NOT return the same numbers but 0 instead.

    Source : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

    0 讨论(0)
提交回复
热议问题