いくつかのケースでミドルクリックで「クリック」が発生しないのはなぜですか？

Question

ChromeとFFの中クリックとclickイベントに関する、私が見ている動作のJSFiddleです。

ちょっとみかん

アプローチ1作品「クリック」：a要素に直接clickハンドラをバインドし、ミドルクリックはChromeではなく、FFでハンドラをトリガしますが。

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

アプローチ2：1以上のaが含まれているdivに委任clickハンドラをバインドします。中クリックはでなく、はこのハンドラーをChromeまたはFFで起動します。 DIVが空から始まりとa要素はAJAX呼び出しによって、またはいくつかのユーザ入力の結果として、後に充填されている場合

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

このアプローチは非常に貴重です。

'のmouseupは' 両方のブラウザで動作する代わりにclick原因アプローチ1と2の両方のmouseupを使用して

に動作します。

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

ここmouseupとJSFiddleです。

mouseupはほぼclickなので、これは面白く便利な場合もあります。しかしmouseupはclickではなく、私はclickの動作の後です。私はのハックなmousedown; setTimeout; mouseupシミュレーションを作成したくありません。

私は答えが「いいえ」と確信していますが、中クリックでトリガーするクロスブラウザーの方法がありますclickハンドラー？そうでない場合、なぜその理由がありますか？

Answer 1

クリックイベントは、通常、左マウスで発生しますただし、ブラウザーによっては、右クリックおよび/または中ボタンのクリックイベントが発生する場合と発生しない場合があります。

Internet ExplorerおよびFirefoxでは、クリックイベントは右または中央ボタンでは発生しません。

したがって、中央または右ボタンでイベントハンドラのクリックイベントを確実に使用することはできません。

代わりに、マウスボタンを区別するために、ほとんどのブラウザでmousedownイベントとmouseupイベントを使用する必要があります。マウスボタンのマウス操作とマウスイベントを起動します。

FirefoxとChrome event.whichには、どのマウスボタンが押されたかを示す数字（1が左側、2が中央、3が右側）が含まれている必要があります。

一方、Internet Explorerでは、event.buttonは、どのマウスボタンがクリックされたかを示します（1が左、4が中央、2が右です）。

event.buttonは、Firefoxや他のブラウザでも機能するはずですが、数字は若干異なる場合があります（0が残っています、1が中、2が正しいです）。

だから、一緒にそれを置くために、我々は通常、このような何か：jQueryのevent.whichを正規化したよう

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のイベントハンドラでそれを使用する必要があります、そのようにやっている：

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

つまり、onclickイベントは使用できません。そのため、マウス操作とマウスアップの両方を使用することができます。

mousedownイベントとmouseupイベントの間に許可される時間を制限するタイマーを追加したり、mousedownとmouseupイベントの間の動きを制限するmousemoveハンドラをスローしたり、マウスポインタ10ピクセル以上移動した可能性はほとんど無限であるため、実際に問題になるはずはありません。

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

Answer 2

短い回答：いいえ。

質問は、あなたは何のために中間クリックを捕まえたいですか？中間クリックは、現在のページとやり取りするのではなく、新しいタブでリンクを開くことを目的としています。 https://code.google.com/p/chromium/issues/detail?id=255

そして、このトピックに関するW3Cのメーリングリスト上の一般的な議論は現在あり：

クロムは、現在この動作をdropingに取り組んでいるhttp://lists.w3.org/Archives/Public/www-dom/2013JulSep/0203.html

---

は今のところまだ、あなたがキャッチすることができます

$(document).on('click', function(e){ 
    console.log(e); 
});