這是我看到的JSFiddle行為,與Chrome和FF中的中鍵點(diǎn)擊和點(diǎn)擊事件有關(guān).

‘click’有點(diǎn)實(shí)際

方法1：將點(diǎn)擊處理程序直接綁定到元素,然后單擊鼠標(biāo)中鍵將觸發(fā)Chrome中的處理程序,但不會(huì)觸發(fā)FF.

$('div a').on('click', function(ev) {
    // middle click triggers this handler
});

方法2：將委派的單擊處理程序綁定到包含一個(gè)或多個(gè)a的div.中鍵單擊不會(huì)在Chrome或FF中觸發(fā)此處理程序.

$('div').on('click', 'a', function(ev) {
    // middle click doesn't trigger this handler
});

如果div開始為空并且a元素稍后通過AJAX調(diào)用填充,或者作為某些用戶輸入的結(jié)果,則此方法非常有價(jià)值.

‘mouseup’有效

使用mouseup而不是click會(huì)導(dǎo)致方法1和2在兩個(gè)瀏覽器中都有效.

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

這是帶有鼠標(biāo)的JSFiddle.

這很有趣,在某些情況下可能很有用,因?yàn)閙ouseup幾乎是點(diǎn)擊.但是mouseup沒有點(diǎn)擊,我就是點(diǎn)擊后的行為.我不想創(chuàng)造一個(gè)hacky mousedown; setTimeout的;點(diǎn)擊鼠標(biāo)模擬.

我很確定答案是“nope”,但是有一種跨瀏覽器的方式可以導(dǎo)致中鍵點(diǎn)擊以觸發(fā)點(diǎn)擊處理程序嗎？如果沒有,原因是什么？

解決方法:

通常會(huì)針對鼠標(biāo)左鍵觸發(fā)click事件,但是,根據(jù)瀏覽器的不同,右鍵和/或中鍵可能會(huì)也可能不會(huì)發(fā)生單擊事件.

在Internet Explorer和Firefox中,不會(huì)為右側(cè)或中間按鈕觸發(fā)單擊事件.

因此,我們無法在中間或右側(cè)按鈕上可靠地使用事件處理程序的click事件.

相反,要區(qū)分鼠標(biāo)按鈕,我們必須使用mousedown和mouseup事件,因?yàn)榇蠖鄶?shù)瀏覽器都會(huì)為任何鼠標(biāo)按鈕觸發(fā)mousedown和mouseup事件.

在Firefox和Chrome event.which應(yīng)該包含一個(gè)數(shù)字,表示按下了什么鼠標(biāo)按鈕(1是左,2是中間,3是右).

另一方面,在Internet Explorer中,event.button指示單擊了哪個(gè)鼠標(biāo)按鈕(1為左,4為中,2為右);

event.button也應(yīng)該在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
        }
    }
}

當(dāng)jQuery規(guī)范化event.which時(shí),你應(yīng)該只需要在jQuery事件處理程序中使用它,因此這樣做：

$('div a').on('mousedown', function(e) {
    if (e.which === 2) {
        // middle button clicked           
    }
});

換句話說,你不能使用onclick事件,所以要模擬它,你可以同時(shí)使用mousedown和mouseup.

您可以添加一個(gè)計(jì)時(shí)器來限制mousedown和mouseup事件之間允許的時(shí)間,甚至可以使用mousemove處理程序來限制mousedown和mouseup事件之間的移動(dòng),并且如果鼠標(biāo)指針移動(dòng)超過十個(gè),則不會(huì)觸發(fā)事件處理程序像素等可能性幾乎是無窮無盡的,所以這不應(yīng)該是一個(gè)問題.

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