Chrome 55 版即將支援 auxclick

傑夫波斯尼克
Jeff Posnick

點擊事件在什麼情況下不是click?對開發複雜使用者介面的網頁開發人員來說,這不是抽象的哲學問題。如果您要實作自訂滑鼠輸入行為,請務必考量使用者的意圖。舉例來說,如果使用者點選含有滑鼠中間按鈕的連結,系統會假設使用者想開啟含有該連結內容的新分頁。如果使用者點選的是隨機的 UI 元素,建議您假設該輸入內容意外並忽略,但預期使用者按下主要按鈕時,則會觸發來自 UI 的回應。

如果不太麻煩,可以透過單一 click 事件監聽器模擬這些細微的互動。您必須明確檢查 MouseEventbutton 屬性,確認其是否設為 0 (代表主要按鈕)。此外,1 通常代表中間按鈕等。但是,大多數開發人員都明確檢查 button 屬性,導致程式碼都以相同的方式處理所有 click,不論按下哪個按鈕都一樣。

自 Chrome 55 版起,凡是使用非主要按鈕的點擊,都會觸發名為 auxclick 的新型 MouseEvent。導入這個新事件是 click 事件行為的對應變更:只有在按下主要滑鼠按鈕時才會觸發。我們希望這些變更可讓網頁開發人員更輕鬆地編寫事件處理常式,來回應他們重視的點擊類型,而不必特別查看 MouseEvent.button 屬性。

減少偽陽性

如前文所述,建立 auxclick 的動機是避免部署自訂 click 處理常式,而此處理常式會錯誤覆寫「中間點擊」行為。舉例來說,假設您編寫的 click 事件處理常式使用 History API 來改寫位置列,並實作自訂單頁導覽。如下所示:

document.querySelector('#my-link').addEventListener('click', event => {
    event.preventDefault();
    // ...call history.pushState(), use client-side rendering, etc....
});

使用滑鼠的主要按鈕觸發時,自訂邏輯可能會正常運作,但如果按下中間按鈕時執行程式碼,實際上就屬於偽陽性。在新的行為導入前,可能會導致系統預設開啟新分頁,而這不符合使用者期望。雖然您可以在處理常式的開頭明確檢查 event.button === 0,而且只在必要情況下才執行程式碼,很容易忘記,甚至沒意識到執行這項操作的必要性。

只執行所需程式碼

偽陽性情形較少的情況是,只有在實際點選非主要滑鼠按鈕時,才會執行 auxclick 回呼。如果有需要的程式碼,例如在開啟新分頁前計算適當的到達網頁網址,您可以監聽 auxclick 並在回呼中加入該邏輯。即便使用者點選主要滑鼠按鈕,也不會產生執行負擔。

瀏覽器支援和相容性

這項新行為目前只適用於 Chrome 55。如初始提案所述,我們喜歡網頁開發人員社群的意見回饋 (不論好壞)。提出 GitHub 問題是將意見回饋分享給正在標準化程序的人員的最佳方式。

在此期間,開發人員不必等待 auxclick 廣泛可用,就能遵循處理滑鼠事件的最佳做法。如果您在 click 事件處理常式開始時,有時間檢查 MouseEvent.button 屬性的值,可以確保採取適當行動。無論 auxclick 是否原生支援,下列模式處理主要點擊和輔助點擊的方式都不同:

function handlePrimaryClick(event) {
    // ...code to handle the primary button click...
}

function handleAuxClick(event) {
    // ...code to handle the auxiliary button click….
}

document.querySelector('#my-link').addEventListener('click', event => {
    if (event.button === 0) {
    return handlePrimaryClick(event);
    }


    // This provides fallback behavior in browsers without auxclick.
    return handleAuxClick(event);
});

// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);