這是我看到的JSFiddle行為,與Chrome和FF中的中鍵點擊和點擊事件有關.
‘click’有點實際
方法1：將點擊處理程序直接綁定到元素,然后單擊鼠標中鍵將觸發(fā)Chrome中的處理程序,但不會觸發(fā)FF.
$('div a').on('click', function(ev) { // middle click triggers this handler});方法2：將委派的單擊處理程序綁定到包含一個或多個a的div.中鍵單擊不會在Chrome或FF中觸發(fā)此處理程序.
$('div').on('click', 'a', function(ev) { // middle click doesn't trigger this handler});如果div開始為空并且a元素稍后通過AJAX調用填充,或者作為某些用戶輸入的結果,則此方法非常有價值.
‘mouseup’有效
使用mouseup而不是click會導致方法1和2在兩個瀏覽器中都有效.
// Approach 1 w/ mouseup$('div a').on('mouseup', function(ev) { // middle click **does** trigger this handler in Chrome and FF});// Approach 2 w/ mouseup$('div').on('mouseup', 'a', function(ev) { // middle click **does** trigger this handler in Chrome and FF});這是帶有鼠標的JSFiddle.
這很有趣,在某些情況下可能很有用,因為mouseup幾乎是點擊.但是mouseup沒有點擊,我就是點擊后的行為.我不想創(chuàng)造一個hacky mousedown; setTimeout的;點擊鼠標模擬.
我很確定答案是“nope”,但是有一種跨瀏覽器的方式可以導致中鍵點擊以觸發(fā)點擊處理程序嗎？如果沒有,原因是什么？
解決方法:
通常會針對鼠標左鍵觸發(fā)click事件,但是,根據(jù)瀏覽器的不同,右鍵和/或中鍵可能會也可能不會發(fā)生單擊事件.
在Internet Explorer和Firefox中,不會為右側或中間按鈕觸發(fā)單擊事件.
因此,我們無法在中間或右側按鈕上可靠地使用事件處理程序的click事件.
相反,要區(qū)分鼠標按鈕,我們必須使用mousedown和mouseup事件,因為大多數(shù)瀏覽器都會為任何鼠標按鈕觸發(fā)mousedown和mouseup事件.
在Firefox和Chrome event.which應該包含一個數(shù)字,表示按下了什么鼠標按鈕(1是左,2是中間,3是右).
另一方面,在Internet Explorer中,event.button指示單擊了哪個鼠標按鈕(1為左,4為中,2為右);
event.button也應該在Firefox和其他瀏覽器中工作,但數(shù)字可能略有不同(0為左,1為中,2為右).
所以把它放在一起我們通常做這樣的事情：
document.onmousedown = function(e) { var evt = e==null ? event : e; if (evt.which) { // if e.which, use 2 for middle button if (evt.which === 2) { // middle button clicked } } else if (evt.button) { // and if e.button, use 4 if (evt.button === 4) { // middle button clicked } }}當jQuery規(guī)范化event.which時,你應該只需要在jQuery事件處理程序中使用它,因此這樣做：
$('div a').on('mousedown', function(e) { if (e.which === 2) { // middle button clicked }});換句話說,你不能使用onclick事件,所以要模擬它,你可以同時使用mousedown和mouseup.
您可以添加一個計時器來限制mousedown和mouseup事件之間允許的時間,甚至可以使用mousemove處理程序來限制mousedown和mouseup事件之間的移動,并且如果鼠標指針移動超過十個,則不會觸發(fā)事件處理程序像素等可能性幾乎是無窮無盡的,所以這不應該是一個問題.
$('#test').on({ mousedown: function(e) { if (e.which === 2) { $(this).data('down', true); } }, mouseup: function(e) { if (e.which === 2 && $(this).data('down')) { alert('middle button clicked'); $(this).data('down', false); } }});