如何使用jQuery區分鼠標左鍵和鼠標右鍵

如何使用jQuery得到單擊的鼠標按鈕？

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

這是由鼠標右鍵和鼠標左鍵觸發的，能捕捉鼠標右鍵的方式是什麼？ 若是如下內容存在，我將很高興：

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

---

#1樓

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

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

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

---

#2樓

 
 
 
 
 
 
  
  
  
 
  
 
  
  
  
  
  
 
 
 

 

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

更新事物的當前狀態：

var $log = $("div.log"); $("div.target").on("mousedown", function() { $log.text("Which: " + event.which); if (event.which === 1) { $(this).removeClass("right middle").addClass("left"); } else if (event.which === 2) { $(this).removeClass("left right").addClass("middle"); } else if (event.which === 3) { $(this).removeClass("left middle").addClass("right"); } });

div.target { border: 1px solid blue; height: 100px; width: 100px; } div.target.left { background-color: #0faf3d; } div.target.right { background-color: #f093df; } div.target.middle { background-color: #00afd3; } div.log { text-align: left; color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="target"></div> <div class="log"></div>

---

#3樓

有不少很是好的答案，可是我只想在使用event.button時event.button IE9和IE <9之間的一個主要區別。

根據舊的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標準甚至在理論上都沒法支持這一點。

---

#4樓

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

    }


});

---

#5樓

你能夠很容易地分辨哪個鼠標按鍵被檢查按下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! */
    }
});