ทริกเกอร์เหตุการณ์ 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>

ชำระเงินหน้า MDN เกี่ยวกับauxclickเหตุการณ์ที่นี่

คุณสามารถใช้ได้

event.button

เพื่อระบุว่าปุ่มเมาส์ใดถูกคลิก

ส่งคืนค่าจำนวนเต็มที่ระบุปุ่มที่เปลี่ยนสถานะ

• 0 สำหรับ 'คลิก' มาตรฐานมักจะเป็นปุ่มซ้าย
• 1 สำหรับปุ่มกลางมักจะคลิกล้อ
• 2 สำหรับปุ่มขวาโดยปกติจะคลิกขวา

โปรดทราบว่าไม่มีการปฏิบัติตามหลักการนี้ใน Internet Explorer: ดู QuirksMode สำหรับรายละเอียด

ลำดับของปุ่มอาจแตกต่างกันไปขึ้นอยู่กับวิธีกำหนดค่าอุปกรณ์ชี้ตำแหน่ง

ยังอ่าน

คลิกเมาส์ปุ่มไหนแล้ว

มีคุณสมบัติสองประการในการค้นหาว่าปุ่มเมาส์ใดถูกคลิก: อันไหนและปุ่ม โปรดทราบว่าคุณสมบัติเหล่านี้ใช้ไม่ได้กับเหตุการณ์การคลิกเสมอไป ในการตรวจจับปุ่มเมาส์อย่างปลอดภัยคุณต้องใช้เหตุการณ์การเลื่อนลงหรือเมาส์อัพ

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

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

ฉันมักจะเกลียดเวลาที่มีคนเสนอทางเลือกแทนวิธีแก้ปัญหา แต่เนื่องจากมีวิธีแก้ปัญหาแล้วฉันจะทำลายกฎของตัวเอง

เว็บไซต์ที่มีการลบล้างคุณลักษณะคลิกกลางมักจะทำให้ฉันติดขัดจริงๆ ฉันมักจะคลิกตรงกลางเพราะต้องการเปิดเนื้อหาใหม่ในแท็บใหม่ในขณะที่มีมุมมองที่ไม่มีสิ่งกีดขวางของเนื้อหาปัจจุบัน เมื่อใดก็ตามที่คุณสามารถออกจากฟังก์ชันคลิกกลางเพียงอย่างเดียวและทำให้เนื้อหาที่เกี่ยวข้องพร้อมใช้งานผ่านแอตทริบิวต์ HREF ขององค์ประกอบที่คุณคลิกฉันเชื่ออย่างยิ่งว่านั่นคือสิ่งที่คุณควรทำ

คำถามนี้เก่าไปหน่อย แต่ฉันพบวิธีแก้ไข:

$(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 มี.whichแอตทริบิวต์ในเหตุการณ์ที่ให้รหัสปุ่มคลิกจากซ้ายไปขวาเป็น 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แอตทริบิวต์ 0 การจัดทำดัชนีไม่ได้ 1 .whichการจัดทำดัชนีเช่น

วิธีการที่เหมาะสมคือการใช้.onตามที่.liveเลิกใช้งานแล้วลบออกจาก jQuery:

$("#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>

ดูออนไลน์ได้ที่นี่