Issue with onClick() and middle button on mouse

Question

<a href="<?=$rowz[0]?>" onClick="countLinks('<?=$row[6]?>','<?=$indexl?>')">[Link <?=$j++?>]</a>

The problem is that it doesn't work with middle button on IE or firefox. In fact, the countLinks using middle button is called only with chrome.

I think I need a Jquery function like mouseup event, just I don't know how call that function, which it calls countLinks with those parameters parameters.

Any help?

Answer 1

The behavior of this is quite variable by browser. See https://code.google.com/p/chromium/issues/detail?id=255#c106 . According to that, of the ones you asked about:

• "IE doesn't fire a click event if the target is a link, but does fire it if another element is clicked even if it's a descendant of a link."

• "Gecko always fires a click event on the document that bubbles and has as target the element being clicked."

For Firefox, thus you can do:

$( document ).click(
  function ( evt ) {
    // ... evt.which === 2 means middle click
  }
);

which is kind of a trick (normally you would listen to events on the link itself), but it works.

Answer 2

Here is a quick solution for you, by using some html5 attributes... Actually it was also possible before html5 but it wasn't validating.

I'd create the links as below:

<a class="myClazzz" href="<?=$rowz[0]?>" data-row="<?=$row[6]?>" data-index="<?=$indexl?>">...</a>

_here we put your parameters to data attributes

and write the js like this:

$(function(){
    //use mouseup, then it doesn't matter which button 
    //is clicked it will just fire the function
    $('.myClazzz').bind('mouseup', function(e){
        //get your params from data attributes
        var row   = $(this).attr("data-row"),
            index = $(this).attr("data-index");

        //and fire the function upon click
        countLinks(row,index);
    });
});
//don't forget to include jquery, before these lines;)

Hope this works out. Sinan.

PS myClazzz -> credits goes to jAndy :)

Answer 3

You're right. You need a mousedown or mouseup event to determine which mouse button was actually clicked.

But first of all, you need to get rid of that inline-event handler onclick and follow the shining road of unobtrusive javascript.

Thatfor you need to give that anchor a id or class tag to identify it (Of course you may also choose to select that anchor with a css selector). Lets assume we have added a class with the name myClazzz :)

javascript:

$(function(){
    $('.myClazzz').bind('mouseup', function(e){
        switch(e.which){
           case 1:
              alert('Left Mouse button pressed.');
           break;
           case 2:
              alert('Middle Mouse button pressed.');
           break;
           case 3:
              alert('Right Mouse button pressed.');
           break;
           default:
              alert('You have a strange Mouse!');
        }
    });
});

The which property within a mousedown / mouseup event handler will contain a number which indicates which mousebutton was clicked.