如何使用jQuery区分鼠标左键和鼠标右键

猿飞云斯丁

2020-03-12

如何使用jQuery获取单击的鼠标按钮?

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

这是由鼠标右键和鼠标左键触发的,能捕捉鼠标右键的方式是什么?如果以下内容存在,我将很高兴:

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

第977篇《如何使用jQuery区分鼠标左键和鼠标右键》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
十三西门 2020.03.12
    $.event.special.rightclick = {
     bindType: "contextmenu",
        delegateType: "contextmenu"
      };

   $(document).on("rightclick", "div", function() {
   console.log("hello");
    return false;
    });
ItachiJim 2020.03.12

With jquery you can use event object type

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});
神乐古一 2020.03.12
$(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;

    }


});
Tom阳光达蒙 2020.03.12
$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});
小小乐 2020.03.12

通过检查which鼠标事件中事件对象属性,可以轻松判断按下了哪个鼠标按钮

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});
达蒙猪猪 2020.03.12

有很多很好的答案,但是我只想在使用时谈一下IE9和IE <9之间的一个主要区别event.button

根据旧的Microsoft规范,event.button该代码不同于W3C使用的代码。W3C仅考虑3种情况:

  1. 单击鼠标左键- event.button === 1
  2. 单击鼠标右键- event.button === 3
  3. 单击鼠标中键- event.button === 2

但是,在较旧的Internet Explorer中,Microsoft稍微按下了按钮,有8种情况:

  1. 未单击任何按钮- event.button === 0或000
  2. 单击左按钮- event.button === 1或001
  3. 单击右键- event.button === 2或010
  4. 单击左右按钮- event.button === 3或011
  5. 单击中间按钮- event.button === 4或100
  6. 单击中左按钮- event.button === 5或101
  7. 单击中和右按钮- event.button === 6或110
  8. 单击全部3个按钮- event.button === 7或111

尽管从理论上讲这是应该起作用的事实,但是Internet Explorer从来没有支持同时按下两个或三个按钮的情况。我之所以提到它,是因为W3C标准甚至在理论上都不能支持这一点。

老丝猿阿飞 2020.03.12
$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

$(document).on("rightclick", "div", function() {
    console.log("hello");
    return false;
});

http://jsfiddle.net/SRX3y/8/

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android