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

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.

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 :)