ミドルクリックを使用してonclickイベントをトリガーする

onclickハッシュリンクのイベントを使用し<div>て、ポップアップとしてを開きます。ただし、中クリックはonclickイベントをトリガーせずhref、リンクの属性値のみを取得して、新しいページにURLをロードします。中クリックで<div>ポップアップを開くにはどうすればよいですか？

編集

この回答は廃止されており、Chrome では機能しません。おそらくauxlinkイベントを使用することになりますが、以下の他の回答を参照してください。

/編集

beggsの答えは正しいですが、中クリックのデフォルトのアクションを防止したいようです。その場合、以下を含めてください

$("#foo").on('click', function(e) {
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

preventDefault（）は、イベントのデフォルトのアクションを停止します。

ミドルクリック/マウスホイールボタンを検出するには、イベントを使用する必要がありますauxclick。例えば：

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

次に、スクリプトファイルで

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

JavaScriptから（HTML属性を使用せずにonauxclick）実行addEventListenerする場合は、要素に移動します。

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
})

<a id="myLink" href="http://example.com">middle click me</a>

こちらのauxclickイベントに関するmdnページをご覧ください。

使用できます

event.button

クリックされたマウスボタンを識別します。

状態が変化したボタンを示す整数値を返します。

• 標準の「クリック」の場合は0、通常は左ボタン
• 1は中央ボタン、通常はホイールクリック
• 右ボタンの場合は2、通常は右クリック

この慣例はInternet Explorerでは実行されないことに注意してください。詳細については、QuirksModeをご覧ください。

ボタンの順序は、ポインティングデバイスの構成方法によって異なる場合があります。

また読む

どのマウスボタンがクリックされましたか？

どのマウスボタンがクリックされたかを調べるには、2つのプロパティがあります。これらのプロパティは必ずしもクリックイベントで機能するとは限らないことに注意してください。マウスボタンを安全に検出するには、mousedownまたはmouseupイベントを使用する必要があります。

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});

<a id="foo" href="http://example.com">middle click me</a>

人々が解決策の代わりに代替案を提供するとき、私は通常嫌いですが、解決策がすでに提供されているので、私は自分のルールを破るつもりです。

ミドルクリック機能が無効になっているWebサイトは、本当に、本当に私を悩ませます。現在のコンテンツを妨げることなく表示しながら、新しいコンテンツを新しいタブで開きたいので、通常は中クリックします。ミドルクリック機能をそのままにして、クリックした要素のHREF属性を介して関連コンテンツを利用できるようにするときはいつでも、それを実行する必要があると強く信じています。

jQueryは、.whichクリックボタンIDを左から右に1、2、3とするイベントの属性を提供します。この場合、2が必要です。

使用法：

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
}); 

Adamantiumの答えも機能しますが、彼が指摘するようにIEに注意する必要があります。

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

また、.button属性はのように1インデックスではなく0インデックスであることに注意してください.which。

この質問は少し古いですが、私は解決策を見つけました：

$(window).on('mousedown', function(e) {
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Chromeがマウスホイールの「クリック」イベントを起動しない

FFとChromeで作業する

廃止予定でjQueryから削除さ.onれ.liveているので、適切な方法はを使用することです。

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

または、「ライブ」のような感じで、#fooドキュメントの開始時にページにない場合：

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

元の答え

パーティーに遅れるのはわかっていますが、ミドルクリックの処理でまだ問題がある場合は、イベントを委任するかどうかを確認してください。委任の場合、clickイベントは発生しません。比較：

これはミドルクリックで機能します：

$('a').on('click', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

これはミドルクリックでは機能しません：

$('div').on('click', 'a', function(){
  alert('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

イベントの委任を使用してミドルクリックを追跡する必要がある場合は、対応するjQueryチケットに記載されている唯一の回避策は、mousedownまたはを使用するmouseupことです。そのようです：

これは、委任されたミドルクリックに対して機能します。

$('div').on('mouseup', 'a', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

こちらからオンラインでご覧ください。