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

如何使用jQuery获得鼠标点击按钮?

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

这是由右键和左键点击触发的，有什么方法可以捕捉到鼠标右键点击?如果存在以下内容，我会很高兴:

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

当前回答

$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});

更新事物的当前状态:

2009-07-30 12:18:21

其他回答

对于那些不知道是否应该使用事件的人。在普通JS或Angular中:现在已弃用，所以更喜欢使用event。按钮。

注意:使用此方法和(mousedown)事件:

左键按关联到1 右键单击与2关联滚动按钮按下与4相关联

and (mouseup)事件将不会返回相同的数字，而是0。

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

2020-01-06 21:28:15

$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

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

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

2012-08-14 13:09:29

老旧的帖子，但想分享完整的答案，人们问上面所有的鼠标点击事件类型。

添加这个脚本，使它适用于整个页面:

var onMousedown = function (e) {
     if (e.which === 1) {/* Left Mouse Click */}
     else if (e.which === 2) {/* Middle Mouse Click */}
     else if (e.which === 3) {/* Right Mouse Click */}
};
clickArea.addEventListener("mousedown", onMousedown);

注意:确保你在被点击的元素上'返回false;' -这真的很重要。

干杯!

2021-07-06 17:07:58

编辑:我在jQuery 1.7或以上版本中使用.on()将其更改为动态添加的元素:

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

演示:jsfiddle.net/Kn9s7/5

[原文开始]这对我来说是有效的:

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

以防你有多种解决方案^^

编辑:Tim Down提出了一个很好的观点，它并不总是会是右键单击触发上下文菜单事件，但当上下文菜单键被按下时(这可以说是右键单击的替代)

2011-02-10 22:16:43

<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Events - Button Demo</title>
</head>
<body>
    <button id="btn">Click me with any mouse button: left, right, middle, ...</button>
    <p id="message"></p>
    <script>
        let btn = document.querySelector('#btn');

        // disable context menu when right-mouse clicked
        btn.addEventListener('contextmenu', (e) => {
            e.preventDefault();
        });

        // show the mouse event message
        btn.addEventListener('mouseup', (e) => {
            let msg = document.querySelector('#message');
            switch (e.button) {
                case 0:
                    msg.textContent = 'Left mouse button clicked.';
                    break;
                case 1:
                    msg.textContent = 'Middle mouse button clicked.';
                    break;
                case 2:
                    msg.textContent = 'Right mouse button clicked.';
                    break;
                default:
                    msg.textContent = `Unknown mouse button code: ${event.button}`;
            }
        });
    </script>
</body>
</html>

2021-10-25 08:15:51

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

推荐文章

最新文章

标签