Disable middle mouse button for modal dialog

Question

I have such a problem: I have link which on click opens ajaxFormDialog in modal dialog on top of the current page. But when I click middle button, it opens in new tab, and everything is not in modal window, but currently on new tab page and looks bad. So, my question would be, how it is possible to disable middle mouse button click for current link?

<a class="ajaxFormDialog" ...></a>
<script>
    $(function (){
       $('a.ajaxFormDialog').live("click", function(e) {
           $.ajax({
                type: "POST",
                url: $("#formContent form").attr("action"),
                data: $("#formContent form").serialize(),
                success: function(data) {
                            //... do something
                         }
                 });
       });
</script>

UPD I used your suggested

if(e.which == 2) {
   e.preventDefault();
}

it maybe preventsDefault, but still opens new tab with that form. When I click with middle/mousewheel button on link it doesn`t even show me, that he entered this $(function (){ $('a.ajaxFormDialog').on("click", function(e) { ...

UPD2 I wrote such code:

$(function (){
   $('a.ajaxFormDialog').live("click", function(e) {
       console.log("Which button is clicked: " + e.which);
       if(e.which == 2) {
          e.preventDefault();
       }
       // rest of the code...

So when I click left mouse button, console shows me "Which button is clicked: 1", but when I click middle/mousewheel button it shows me nothing and still opens in new tab.

if( e.which == 2 ) { // middle mouse button code e.preventDefault(); alert("middle button"); } — Sora, Jun 21 '13 at 11:32
somehow doesn`t work, still opens in new tab. I`m using FireFox. — Gytis, Jun 21 '13 at 11:47
I am not sure that this can be avoided. What about programmatically replacing it with a pseudo-link (which looks like a link but is not really a link, like a `` with the same content and the same CSS applied to it), which does not have the same side-effects? — MasterAM, Jun 21 '13 at 12:22
Instead of `e.preventDefault()` use `return false` to prevent default actions and stop propagnation. http://jsfiddle.net/QKtyw — Ron van der Heijden, Jun 21 '13 at 12:34

score 2 · Answer 1 · answered Jun 21 '13 at 11:30

2

$("a.ajaxFormDialog").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

answered Jun 21 '13 at 11:30

ahmet

4,955
11
39
64

Sorry, mate, I changed 'live' to 'on', and added that if with preventDefault - it still opens in new tab. – Gytis Jun 21 '13 at 11:41
@Gytis The problem with this approach is that the ajax function will still occur. Check my solution below. – Mr_Green Jun 21 '13 at 12:10

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

UPDATED:

The default function of middle mouse button can't be disabled in firefox. As stated here.

Firefox and the other Gecko browsers have released control of the right mouse button, but the default action of a middle click can not be disabled. You can change what the default action is by editing the middlemouse settings on the "about:config" URL, but Javascript can't cancel them.

You can find similar link of your post here.

The very close working solution in some modern browser (like Chrome) is:

if (event.preventDefault)
    event.preventDefault();
else
    event.returnValue= false;
return false;

edited May 23 '17 at 11:56

Community

1
1

answered Jun 21 '13 at 12:02

Mr_Green

40,727
45
159
271

Still opens in new tab, I`ll once more update my post (UPD2) to show more detail – Gytis Jun 21 '13 at 12:18
@Gytis it is opening in new tab when you press middle mouse button right? – Mr_Green Jun 21 '13 at 12:21
@Gytis it seems the problem is something other than what you mentioned in your post. please debug it in your favourite developer tool and give more details. – Mr_Green Jun 21 '13 at 12:35
1

@Mr_Green, a similar approach works for me in Chrome but not in Firefox. See [here](http://jsfiddle.net/BZnaX/1/). That is why I think it could be better to replace the anchor altogether. – MasterAM Jun 21 '13 at 22:55
1

@Gytis It seems to be default behaviour of firefox. Once go through this [**link**](http://stackoverflow.com/q/1930875/1577396). You might find solution for this issue. – Mr_Green Jun 22 '13 at 15:04
1

@MasterAM ya that could be better way. – Mr_Green Jun 22 '13 at 15:05

score 1 · Accepted Answer · answered Jun 22 '13 at 23:48

Since Firefox (and, presumably, Opera as well) have taken middle-click behavior out of the developers' hands, I would suggest replacing the anchor node(s) with a different node, e.g <span>.

This seems semantically O.K, since the <a> tag no longer functions as an actual link in your usage scenario. It can maintain its appearance using CSS.

A live example can be found in this jsfiddle.

For this kind of markup:

<a class="ajaxFormDialog" href="#">replaced link</a>

you can use CSS such as:

a, .ajaxFormDialog {
    color: orange;
    text-decoration: underline;
    cursor: hand;
}

a:hover, .ajaxFormDialog:hover {
    background: orange;
    color: white;

}

and replace the anchor with a span, including the ability to store any desired property and maintain any child nodes (if any). You can later retrieve those properties in the event handler.

The example code is as follows:

var genericHandler = function(e) {
    var el = $(e.target);
    var href = el.data('href');
    //extract data
    console.log('clicked span: ',el, ' with stored href: ', href);
    //do stuff here
};

$('a.ajaxFormDialog').replaceWith(function(){
    var el = $(this);
    console.log('replacing element: ', el);
    return $("<span>").addClass('ajaxFormDialog').append($(this).contents()).
        data('href', el.attr('href')). //you can store other data as well
        click(genericHandler);
});

This seems to be the lesser of all evils, if you wish to avoid middle-click side effects, for the moment.

Disable middle mouse button for modal dialog

3 Answers3

Linked