Kích hoạt sự kiện onclick bằng cách sử dụng nhấp chuột giữa

Tôi đang sử dụng onclicksự kiện của một liên kết được băm để mở <div>một cửa sổ bật lên. Nhưng nhấp chuột giữa không kích hoạt onclicksự kiện mà chỉ lấy hrefgiá trị thuộc tính của liên kết và tải URL trong một trang mới. Làm cách nào để sử dụng nhấp chuột giữa để mở <div>cửa sổ bật lên?

BIÊN TẬP

Câu trả lời này không được dùng nữa và không hoạt động trên Chrome. Có thể bạn sẽ kết thúc bằng sự kiện auxlink , nhưng hãy tham khảo các câu trả lời khác bên dưới.

/BIÊN TẬP

Câu trả lời của beggs là đúng, nhưng có vẻ như bạn muốn ngăn hành động mặc định của nhấp chuột giữa. Trong trường hợp đó, hãy bao gồm những điều sau

$("#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 () sẽ dừng hành động mặc định của sự kiện.

Để phát hiện nút nhấp chuột giữa / con lăn chuột, bạn phải sử dụng sự kiện auxclick. Ví dụ:

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

Sau đó, trong tệp script của bạn

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

Nếu bạn muốn làm điều đó từ JavaScript (mà không sử dụng thuộc tính HTML onauxclick), thì bạn addEventListenerđến phần tử:

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>

Kiểm tra trang mdn về auxclicksự kiện ở đây .

Bạn có thể dùng

event.button

để xác định nút chuột nào đã được nhấp.

Trả về giá trị số nguyên cho biết nút đã thay đổi trạng thái.

• 0 cho 'nhấp chuột' tiêu chuẩn, thường là nút bên trái
• 1 cho nút giữa, thường là nhấp chuột
• 2 cho nút bên phải, thường nhấp chuột phải

Lưu ý rằng quy ước này không được tuân thủ trong Internet Explorer: hãy xem QuirksMode để biết chi tiết.

Thứ tự các nút có thể khác nhau tùy thuộc vào cách thiết bị trỏ đã được cấu hình.

Cũng đọc

Nút chuột nào đã được nhấp vào?

Có hai thuộc tính để tìm ra nút chuột nào đã được nhấp: nút nào và nút nào. Xin lưu ý rằng các thuộc tính này không phải lúc nào cũng hoạt động trên một sự kiện nhấp chuột. Để phát hiện một nút chuột một cách an toàn, bạn phải sử dụng các sự kiện di chuyển xuống hoặc di chuột lên.

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

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

Tôi thường ghét khi mọi người đưa ra các giải pháp thay thế thay vì giải pháp, nhưng vì các giải pháp đã được cung cấp nên tôi sẽ phá vỡ quy tắc của chính mình.

Các trang web mà tính năng nhấp chuột giữa bị ghi đè có xu hướng thực sự gây khó chịu cho tôi. Tôi thường nhấp chuột giữa vì tôi muốn mở nội dung mới trong một tab mới trong khi có một chế độ xem nội dung hiện tại không bị cản trở. Bất cứ lúc nào bạn có thể để riêng chức năng nhấp chuột giữa và cung cấp nội dung có liên quan thông qua thuộc tính HREF của phần tử được nhấp của bạn, tôi thực sự tin rằng đó là điều bạn nên làm.

jQuery cung cấp một .which thuộc tính trên sự kiện cung cấp id nút bấm từ trái sang phải là 1, 2, 3. Trong trường hợp này, bạn muốn 2.

Sử dụng:

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

Câu trả lời của Adamantium cũng sẽ hoạt động nhưng bạn cần chú ý đến IE như anh ấy lưu ý:

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

Cũng nên nhớ .buttonthuộc tính là 0-indexed chứ không phải 1-indexed like .which.

Câu hỏi này hơi cũ, nhưng tôi đã tìm ra giải pháp:

$(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 không kích hoạt sự kiện "nhấp chuột" cho con lăn chuột

Làm việc trong FF và Chrome

Phương pháp thích hợp là sử dụng .on, như .liveđã không được dùng nữa và sau đó bị xóa khỏi jQuery:

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

Hoặc nếu bạn muốn cảm giác giống như "trực tiếp" và #fookhông có trên trang của bạn khi bắt đầu tài liệu:

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

câu trả lời ban đầu

Tôi biết mình đến muộn trong bữa tiệc, nhưng đối với những người vẫn gặp vấn đề với việc xử lý nhấp chuột giữa, hãy kiểm tra xem bạn có ủy quyền sự kiện hay không. Trong trường hợp ủy quyền, clicksự kiện không nổ súng. Đối chiếu:

Điều này hoạt động cho các nhấp chuột giữa:

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

Điều này không hoạt động đối với các nhấp chuột giữ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>

Nếu bạn vẫn cần theo dõi nhấp chuột giữa bằng cách sử dụng ủy quyền sự kiện , thì cách duy nhất như đã nêu trong vé jQuery tương ứng , là sử dụng mousedownhoặc mouseupthay thế. Như vậy:

Điều này hoạt động đối với các nhấp chuột giữa được ủy quyền:

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

Xem trực tuyến tại đây .