Orta tıklama kullanarak onclick olayını tetikleme


93

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 ?


15
Orta tıklama onclick olayını tetiklemediğinde sorunun nasıl çözüldüğünü hala anlamıyorum.
Tomáš Zato - Monica'yı eski durumuna getir

3
@ TomášZato Tarayıcılar, orta tıklama ile bir 'tıklama' olayını tetiklemezler, ancak bir 'fareyi kaldırma' olayını tetikleyebilirler. Daha sonra javascript çerçevesi, kafanızı karıştırmak için bunu bir 'tıklama' eylemine bağlayabilir. Unixpapa.com/js/mouse.html
rds

Yanıtlar:


64

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.


19
Bunun .livekullanımdan kaldırıldığını ve lehine kaldırıldığını unutmayın.on
Naftali namı diğer Neal

2
Benim için FF yalnızca fare indirme olayı ile çalışır. Tıklama olayı bu şeyi çağırır scr.hu/1kig/su5c9
l00k

1
Bunun için çapraz tarayıcı sabiti var 2mı?
fracz

11
Bu artık Chrome 55'te çalışmıyor. 1 , 2 ve bu soruya bakın
billc.cn

1
Sorun orta tıklamanın tıklama olayını tetiklemediğinde bu nasıl bir çözüm olabilir?
Drazen Bjelovuk

36

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 .


not: onauxclick çalışacak ancak bağlantıyı yeni bir sekmede açmayacak ...
Jonathan Laliberte

2
Aslında Chrome'da çalışan tek cevap budur. Sağ fare düğmesi için bir "tıklama" olayına ihtiyacınız varsa, "bağlam menüsünü" kullanabilirsiniz (yalnızca sağ tıklama ile tetiklenmekle birlikte): developer.mozilla.org/en-US/docs/Web/API/Element/…
Kankaristo

2
Yukarıdaki cevapla birleştirerek, sağ tıklama yakalamasını if(event.button==1)cümle ile önleyebilirsiniz , bu çalışan tek cevaptır.
Buddy

Hem auxclickolayı kullanmanız hem de değerini kontrol etmeniz gerektiğini unutmayın e.button == 1. Cevabı düzenledim.
Flimm

26

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>


4
event.whichJQuery kaynak - satır 2756 -if ( !event.which && event.button ) event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
Russ Cam

2
@RussCam Ancak, MouseEvent.whichherhangi bir spesifikasyonda MouseEvent.buttontanımlanmamıştır , ancak DOM L2 Olaylarında tanımlanmıştır.
Oriol

@Oriol doğru, ancak farklı tarayıcı satıcılarında farklı şekilde uygulandı. OP soruyu jQuery ile etiketledi, bu yüzden kullanmayı event.whichönerdim ama MouseEvent.whichresmi şartnamenin bir parçası olmayan detaylandırmalıydım .
Russ Cam

@rahul, 7'den fazla düğmeli oyun farelerine ne dersiniz? egg-tech.com/blog/images/mouse%20buttons.jpg
Pacerier

Aslında, bu Firefox veya Chrome gibi tarayıcılarda çalışmaz, yalnızca birincil tıklama için. Bkz 1 , 2 ve bu soruyu .
Flimm

8

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.


1
ama ya web sayfanızda sekmeleriniz varsa ve tarayıcınızdakilerle aynı davranışı istiyorsanız? middleclick, mevcut bir sekmeyi kapatmalıdır.
cmxl

7

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


Kullanım durumunuzu varsaymak istemiyorum, ama bahse girerim birçok insan bunun yerine 'mouseup' etkinliğine ihtiyaç duyar. Farenin orta düğmesiyle de çalışır.
Bojidar Stanchev

Bunu Firefox ve Chrome'da denediğimde, çağrılsa bile, bağlantının yeni bir sekmede açılma varsayılan davranışını engellemiyor e.preventDefault().
Flimm

6

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.


Mozilla tarayıcısının işlevselliğini geçersiz kılabilir miyim !! örneğin sol tıklamada bir açılır pencere açar .... ancak orta tıklama için bir açılır pencere açmaz ve açılır pencerenin açılmadığı yeni bir sekme açılır .. bu nedenle orta tıklama işlevini geçersiz kılmak istiyorum mozilla ....
Sadesh Kumar N

Mozilla, tüm açılır pencereleri yeni bir pencere yerine yeni bir sekmede açma ayarına sahiptir. Kullanıcı bu seçeneğe imkan varsa o zaman yok düşünüyorum Yapabileceğin bir şey yoktur. Eğer bu değilse, sorun sayfasına bir kod veya bir bağlantı gönderebilir misiniz?
yalvarıyor

Bu, Firefox ve Chrome gibi tarayıcılarda çalışmaz.
Flimm

5

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


Etkinlik click, Firefox ve Chrome gibi tarayıcılarda orta fare düğmesi için çalışmıyor.
Flimm


Evet. Stack Overflow, güncel olmayan yanıtlar için iyi bir çözüme sahip değildir. Korkarım olumsuz oy vermem gerekiyor çünkü artık "Bu cevap kullanışlı değil". Daha da kötüsü, sabitlenmiş yanıtın güncel olmadığı için yüzlerce veya binlerce olumsuz oy alabilmesidir ve OP yanıt vermiyorsa yine de sonsuza kadar sabitlenmiş kalacaktır.
Flimm

Yeni bir soru sorun :-) (buna güncel olmadığını ve 2020 cevabını istediğinizi söyleyin). Ama aynı zamanda mousedown / mouseup olaylarını da kullanabilir mi?
Naftali aka Neal

Bunu yapsam bile, benim gibi insanlar hala arama motorlarından geldiklerinde bu cevaba rastlayacaklar ve sabitlenmiş yanlış cevapla kafaları karışacak.
Flimm

3

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 .


Aslında, clickilk örneğinizdeki gibi orta tıklamalar için çalışmaz.
Flimm
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.