禁用鼠标中键进行模态对话框

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.

Answer 1

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

Answer 2

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;

Answer 3

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, eg <span> .

This seems semantically OK, 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.