Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with onClick() and middle button on mouse

<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?

like image 302
markzzz Avatar asked Jul 17 '10 18:07

markzzz


People also ask

Why is my mouse middle-click not working?

There are a few things that can cause issues for your middle mouse button. Things like hardware malfunctions, incorrect device settings, uninstalled drivers, and incorrect Windows configuration can all cause your middle mouse button to malfunction.

How do I get my middle mouse button to click?

Many mice and some touchpads have a middle mouse button. On a mouse with a scroll wheel, you can usually press directly down on the scroll wheel to middle-click. If you don't have a middle mouse button, you can press the left and right mouse buttons at the same time to middle-click.

Why is there a button in the middle of my mouse?

The scroll wheel that is located in the middle of the mouse is used to scroll up and down on any page without using the vertical scroll bar on the right hand side of a document or webpage. The scroll wheel can also be used as a third button on the mouse.

What does middle-click do on a mouse?

In some programs, middle-click lets you use program-specific features. For example, in Internet Explorer 7, you can middle-click a link to open the link in a new tab. Turns off the mouse button. Functions the same as pressing ALT on the keyboard.


2 Answers

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.

like image 185
jAndy Avatar answered Sep 22 '22 16:09

jAndy


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

like image 32
Sinan Avatar answered Sep 18 '22 16:09

Sinan