Orta tıklama kullanarak onclick olayını tetikleme

Açılır pencere olarak onclickaçmak için hash uygulanmış bağlantı olayını kullanıyorum <div>. Ancak ortadaki tıklama onclicketkinliği tetiklemez, yalnızca hrefbağlantının öznitelik değerini alır ve URL'yi yeni bir sayfaya yükler. <div>Açılır pencere olarak açmak için orta tıklamayı nasıl kullanabilirim ?

DÜZENLE

Bu cevap kullanımdan kaldırıldı ve Chrome'da çalışmıyor . Muhtemelen auxlink olayını kullanacaksınız , ancak lütfen aşağıdaki diğer yanıtlara bakın.

/DÜZENLE

dilencinin yanıtı doğru, ancak orta tıklamanın varsayılan eylemini önlemek istediğiniz gibi görünüyor. Bu durumda aşağıdakileri ekleyin

$("#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 () , olayın varsayılan eylemini durdurur.

Orta tıklama / fare tekerleği düğmesinin algılanması için olayı kullanmanız gerekir auxclick. Örneğin:

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

Sonra komut dosyanızda

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

Bunu JavaScript'ten yapmak istiyorsanız (HTML özelliğini kullanmadan onauxclick), o zaman addEventListeneröğeye:

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>

auxclickOlayla ilgili mdn sayfasını buradan kontrol edin .

Kullanabilirsiniz

event.button

hangi fare düğmesinin tıklandığını belirlemek için.

Durumunu değiştiren düğmeyi gösteren bir tamsayı değeri döndürür.

• Standart 'tıklama' için 0, genellikle sol düğme
• Orta düğme için 1, genellikle çark tıklama
• Sağ düğme için 2, genellikle sağ tıklama

Bu kurala Internet Explorer'da uyulmadığını unutmayın: ayrıntılar için QuirksMode'a bakın.

Düğmelerin sırası, işaretleme aygıtının nasıl yapılandırıldığına bağlı olarak farklı olabilir.

Ayrıca oku

Hangi fare düğmesi tıklandı?

Hangi fare düğmesinin tıklandığını bulmanın iki özelliği vardır: hangisi ve düğmesi. Lütfen bu özelliklerin bir tıklama olayında her zaman çalışmadığını unutmayın. Bir fare düğmesini güvenli bir şekilde algılamak için, fare indirme veya mouseup olaylarını kullanmanız gerekir.

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

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

Genelde insanların çözüm yerine alternatifler sunmasından nefret ederim, ancak çözümler zaten sağlandığı için kendi kuralımı çiğneyeceğim.

Orta tıklama özelliğinin geçersiz kılındığı web siteleri beni gerçekten çok rahatsız ediyor. Genellikle orta tıklıyorum çünkü mevcut içeriğin engelsiz bir görünümüne sahipken yeni içeriği yeni bir sekmede açmak istiyorum. Orta tıklama işlevini tek başına bırakıp tıkladığınız öğenin HREF özelliği aracılığıyla ilgili içeriği kullanıma sunabildiğiniz her seferinde, yapmanız gereken şeyin bu olduğuna kesinlikle inanıyorum.

Bu soru biraz eski ama bir çözüm buldum:

$(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, fare tekerleği için "tıklama" olayını tetiklemiyor

FF ve Chrome'da çalışın

jQuery .which, tıklama düğmesi kimliğini soldan sağa 1, 2, 3 olarak veren olayda bir öznitelik sağlar . Bu durumda 2 istersiniz.

Kullanım:

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

Adamantium'un cevabı da işe yarayacak, ancak IE'ye dikkat etmeniz gerekiyor:

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

Ayrıca, .buttonözniteliğin 0-endeksli değil 1-indeksli olduğunu unutmayın .which.

Uygun bir yöntem kullanılmak için .onolduğu gibi, .livekullanımdan kaldırıldı ve daha sonra edilmiş çıkarıldı jQuery:

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

Veya "canlı" gibi bir his istiyorsanız ve #foobelge başlangıcında sayfanızda yoksa:

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

orijinal cevap

Partiye geç kaldığımı biliyorum, ancak yine de orta tıklamayla başa çıkmada sorun yaşayanlar için, etkinliği delege edip etmediğinizi kontrol edin. Delegasyon clickdurumunda olay başlamaz. Karşılaştırmak:

Bu, orta tıklamalar için işe yarar:

$('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>

Bu, orta tıklamalar için çalışmaz:

$('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>

Yine de olay yetkilendirmesini kullanarak orta tıklamayı izlemeniz gerekiyorsa , karşılık gelen jQuery biletinde belirtildiği gibi tek yol mousedownveya mouseupyerine kullanmaktır . Şöyle:

Bu, yetki verilen orta tıklamalar için işe yarar:

$('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>

Burada çevrimiçi görün .