javascript - 如何防止用户中间单击带有 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();
});

如果您只想为某个链接禁用它，只需将事件侦听器目标（窗口）替换为对特定节点的引用。