JQuery: make the whole block clickable, while maintaining the ability to open in a new tab / window

I do not want to use css to expand the width / height of the link, etc.

With my code, the entire LI is clickable, it opens the link found inside it. I saved the middle mouse click to open the link in a new window.

  • I am wondering if someone who really really knows what they are doing can help me with this and let me know if this is the best way to write this, or are there any changes that could be made to my code?

  • also: can someone help me add “ctrl + left click” to open the link in a new window, which is the same thing the click of the middle mouse button really is, I'm just not sure how to test for ctrl? I thought about changing else if ((e.which == 2)) {part to else if ((e.which == 2) && (e.which == 16)) {will work, but it is not.

the code:

$('li a').each(function() {
            $(this).parent().bind('click', function(e) {
                if((e.which == 1)) {
                    alert('left mouse button clicked')
                    window.location=$(this).find("a").attr("href"); return false;
                }
                else if ((e.which == 2)) {
                    alert('middle mouse button clicked')              

                        window.open($(this).find('a').attr('href'));
                        return false;  
                }
            });
        });
+3
source share
1 answer

Here you will find a guide for detecting keystrokes (all this happens through an event): http://www.quirksmode.org/js/keys.html

Please note that in OSX this is not possible in most browsers.

+1
source

All Articles