Disable Middle Mouse Button For Modal Dialog

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 everyth

Solution 1:

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

Solution 2:

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.

Solution 3:

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;