How can I prevent a user from middle clicking a link with javascript or jquery - Stack Overflow

admin管理员组

文章数量:1023221

I want to prevent the user from being able to middle click a certain link to open a new tab. I have tried the following:

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

This doesn't seem to work.

I want to prevent the user from being able to middle click a certain link to open a new tab. I have tried the following:

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

This doesn't seem to work.

• javascript
• jquery

Share Improve this question Follow asked Aug 30, 2012 at 12:42 MikeMike 2,9001010 gold badges4444 silver badges5757 bronze badges 7

• 21 pro tip: don't mess with default browser behavior - it will drive users away. – jbabey Commented Aug 30, 2012 at 12:43
• 4 Also, middle-click isn't the only way to open a new tab... – Michael Berkowski Commented Aug 30, 2012 at 12:44
• 3 Why do you want to do this? There are many ways to open a link in a new tab, and you cannot prevent all of them. – Matt Ball Commented Aug 30, 2012 at 12:44
• You will prevent users for opening tabs at all if you mess with their experience. – moonwave99 Commented Aug 30, 2012 at 12:45
• 2 Users will hate you and will stop using your website if you do this. – Hubert Schölnast Commented Aug 30, 2012 at 12:45

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 2

It's an unfortunate bination of jQuery and the browser. To prevent the new tab from opening you have to use the click event (rather than mouseup), but jQuery does not run delegate click handlers for mouse buttons other than the left one:

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

What you can do is using a non-delegate handler and check the target element yourself: http://jsbin./ojoqap/10/edit. This works on Chrome, at least (inspired by @Abraham).

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

Remember, this is a bad idea. I do not remend doing this. See the ments above. But here's how to detect middle-click:

if (e.which == 2)
  return false

I'm guessing you're trying to make sure that some navigation remains in your 'parent' page. I think approaching this from another angle might be appropriate.

Assuming you don't need to worry about non-JS users, as an alternative to preventing a middle click, I might suggest loading the content via an ajax call and inserting it into your current page.

This could be acplished with a little javascript while leaving it usable (though maybe not ideally by users with JS turned off)

Just something to think about. There's plenty of ways to improve upon this idea I'm sure.

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); });
        });
});

Hi go through this reference..

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

middle mouse keycode is 4

so you can try like this

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

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

FIDDLE LINK

None of the answers above worked for me. According to MDN the auxclick event is the proper way to do this.

The following code will prevent the middle click behaviour on the entire page.

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

If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.

I want to prevent the user from being able to middle click a certain link to open a new tab. I have tried the following:

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

This doesn't seem to work.

I want to prevent the user from being able to middle click a certain link to open a new tab. I have tried the following:

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

This doesn't seem to work.

• javascript
• jquery

Share Improve this question Follow asked Aug 30, 2012 at 12:42 MikeMike 2,9001010 gold badges4444 silver badges5757 bronze badges 7

• 21 pro tip: don't mess with default browser behavior - it will drive users away. – jbabey Commented Aug 30, 2012 at 12:43
• 4 Also, middle-click isn't the only way to open a new tab... – Michael Berkowski Commented Aug 30, 2012 at 12:44
• 3 Why do you want to do this? There are many ways to open a link in a new tab, and you cannot prevent all of them. – Matt Ball Commented Aug 30, 2012 at 12:44
• You will prevent users for opening tabs at all if you mess with their experience. – moonwave99 Commented Aug 30, 2012 at 12:45
• 2 Users will hate you and will stop using your website if you do this. – Hubert Schölnast Commented Aug 30, 2012 at 12:45

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 2

It's an unfortunate bination of jQuery and the browser. To prevent the new tab from opening you have to use the click event (rather than mouseup), but jQuery does not run delegate click handlers for mouse buttons other than the left one:

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

What you can do is using a non-delegate handler and check the target element yourself: http://jsbin./ojoqap/10/edit. This works on Chrome, at least (inspired by @Abraham).

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

Remember, this is a bad idea. I do not remend doing this. See the ments above. But here's how to detect middle-click:

if (e.which == 2)
  return false

I'm guessing you're trying to make sure that some navigation remains in your 'parent' page. I think approaching this from another angle might be appropriate.

Assuming you don't need to worry about non-JS users, as an alternative to preventing a middle click, I might suggest loading the content via an ajax call and inserting it into your current page.

This could be acplished with a little javascript while leaving it usable (though maybe not ideally by users with JS turned off)

Just something to think about. There's plenty of ways to improve upon this idea I'm sure.

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); });
        });
});

Hi go through this reference..

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

middle mouse keycode is 4

so you can try like this

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

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

FIDDLE LINK

None of the answers above worked for me. According to MDN the auxclick event is the proper way to do this.

The following code will prevent the middle click behaviour on the entire page.

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

If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.

本文标签： How can I prevent a user from middle clicking a link with javascript or jqueryStack Overflow