如何防止用戶使用 javascript 或 jquery 中間單擊鏈接

Question

我想阻止用戶中鍵單擊某個鏈接以打開新選項卡。 我嘗試了以下方法：

$(window).on('mouseup', '.sptDetails', function(e){
    e.preventDefault();
    if(e.button == 1){
        return false;
    }
});

這似乎不起作用。

Answer 1

這是 jQuery 和瀏覽器的不幸組合。 為了防止新選項卡打開，您必須使用click事件（而不是mouseup ），但 jQuery 不會為左鍵以外的鼠標按鈕運行委托單擊處理程序：

// Avoid non-left-click bubbling in Firefox (#3861)
if ( delegateCount && !(event.button && event.type === "click") ) {

您可以做的是使用非委托處理程序並自己檢查目標元素： http : //jsbin.com/ojoqap/10/edit 。 這至少適用於 Chrome（受@Abraham 啟發）。

$(document).on("click", function(e) {
  if($(e.target).is("a[href]") && e.button === 1) {
    e.preventDefault();
  }
});

Answer 2

請記住，這是一個壞主意。 我不建議這樣做。 請參閱上面的評論。 但這里是如何檢測中間點擊：

if (e.which == 2)
  return false

Answer 3

我猜您是想確保某些導航保留在您的“父”頁面中。 我認為從另一個角度處理這個問題可能是合適的。

假設您不需要擔心非 JS 用戶，作為防止中間點擊的替代方法，我可能建議通過 ajax 調用加載內容並將其插入到當前頁面中。

這可以通過一點 javascript 來完成，同時保持可用（盡管關閉 JS 的用戶可能並不理想）

只是想一想。 我相信有很多方法可以改進這個想法。

HTML：

<a href="/mylink" id="href-load-content">
<div id="content-pane"></div>

Javascript：

$(function() {

     $('#href-load-content').data('href', function() { return $(this).attr('href') } )
        .attr('href', 'javascript:return;')
        .on('click', function() {
            $.get($(this).data('href'), function(msg) { $('#content-pane').html(msg); });
        });
});

Answer 4

嗨，通過這個參考..

http://delphi.about.com/od/objectpascalide/l/blvkc.htm

鼠標中鍵是 4

所以你可以像這樣嘗試

if(e.which==4|| e.keycode==4)
e.returnValue=false;

Answer 5

// <a href="http://google.com" id="google">Google</a><br> <a href="http://bing.com" id="bing">Bing</a>
$(function(){
  $(document).on("click", function(e){
    if($(e.target).is("#google") && e.button===1)
      e.preventDefault()
  })
})

小提琴鏈接

Answer 6

上面的答案都不適合我。 根據MDN ， auxclick事件是執行此操作的正確方法。

以下代碼將阻止整個頁面上的中間點擊行為。

window.addEventListener("auxclick", (event) => {
  if (event.button === 1) event.preventDefault();
});

如果您只想為某個鏈接禁用它，只需將事件偵聽器目標（窗口）替換為對特定節點的引用。