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

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

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

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

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

当前回答

通过查看鼠标事件的事件对象的属性，你可以很容易地知道按下了哪个鼠标按钮:

/*
  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! */
    }
});

2009-10-29 22:20:25

其他回答

在我看来，稍微改编一下thevillagediot的答案会更简洁:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

编辑:JQuery提供了一个e.t it属性，在左、中、右单击时分别返回1、2、3。所以你也可以使用if (e.which == 3) {alert("right click");｝

请参见:“使用中点击触发onclick事件”的回答

2009-12-18 18:49:54

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

2017-03-22 22:52:16

事件。which === 1确保它是一个左键点击(当使用jQuery时)。

但您还应该考虑修改器键:ctrlcmdshiftalt

如果你只对捕捉简单的、未修改的左键点击感兴趣，你可以这样做:

var isSimpleClick = function (event) {
  return !(
    event.which !== 1 || // not a left click
    event.metaKey ||     // "open link in new tab" (mac)
    event.ctrlKey ||     // "open link in new tab" (windows/linux)
    event.shiftKey ||    // "open link in new window"
    event.altKey         // "save link as"
  );
};

$('a').on('click', function (event) {
  if (isSimpleClick(event)) {
    event.preventDefault();
    // do something...
  }
});

2014-05-08 10:25:19

<!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

你也可以绑定到contextmenu并返回false:

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

演示:http://jsfiddle.net/maniator/WS9S2/

或者你可以做一个快速插件，做同样的事情:

(function( $ ) {
  $.fn.rightClick = function(method) {

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

  };
})( jQuery );

演示:http://jsfiddle.net/maniator/WS9S2/2/

使用.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.

演示:http://jsfiddle.net/maniator/WS9S2/283/

2011-12-13 15:26:20

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

推荐文章

最新文章

标签