Erwinus Erwinus - 6 months ago 45
Javascript Question

Detect middle button click (scroll button) with jQuery

I have a list with a tags to play some mp3 files onclick. It is working fine when binding on the 'click' event with jQuery:

$oo.data({'__mp3play':true,'wapiHandle':h+0,'wapiIndex':o.ajaxPlayList[h].length})
.bind( 'click', function()
{ var wh = $j(this).data('wapiHandle');
if( typeof o.regObjects[wh] == 'object' && o.regObjects[wh].play(this.href))
{ return false; }
});


When clicking the left mouse button:
It disables default handling when my flash plugin is loaded otherwise it will be opened normally.

BUT:
When I use the scrollbutton of the mouse and click on it, the click event will not fired and the link opens normally.

I have tried to use mousedown or mouseup events but doesn't help, the link always opens normally with the side effect that the music starts playing also with the flash player.

Also
preventDefault()
does not work at all.

Can somebody tell me how to detect the middle mouse button click (scroll button click)?

Thank you for your comments.

PS: I have already tried other solutions about the 'middle button' available on this site.

Tested in all kind of browsers with the same result.

EDIT:
This also does not work, the link will be opened normally when using the middle mouse button. When using the left mouse button, nothing happen.

$oo.bind( 'mousedown click mouseup', function(e)
{ e.preventDefault(); e.stopPropagation(); return false; });

Answer

Okay guys,

Thank you for your input. '@no.good.at.coding' has a nice solution but does not work on IE (see later on this writing) but is a good starting point. I change his code to this:

// Avoid relations will be opened in extra tab when clicking middle-scroll-button to open it
$(document).bind($.browser.msie ? "mousedown" : "click", function(e)
{
    if (e.which == 2 && e.target.tagName == 'A') 
    {
        var bIE = $.browser.msie,
            $o = $(e.target),
            oe = $o.data('events'),
            b = true,
            f = function(){};

        if (typeof oe == 'object' && oe['click']) {
            f = function(){ $o.trigger('click'); }
        } else {
            b = (typeof $o[0].href == 'string' && ($o[0].target == undefined || $o[0].target == '' || $o[0].target == '_self'));
            if (b) { 
                f = function () { window.location.href=$o[0].href; };
            }
        }

        if (!b) { return; }

        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();

        if (bIE)
        {
            if (!window.__swcp__) { 
                window.__swcp__= $('<div style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#000;display:block;z-index:9999;opacity:0.01;filter:alpha(opacity:1);" />').appendTo('body'); 
            }
            window.__swcp__.show();
        }

        setTimeout(f, 50);
        if (bIE) { 
            setTimeout( function() { window.__swcp__.hide(); }, 1000 );
        }

        return false;
    }
});

The middle-button acts now like the left-button of a mouse. As you can see IE needs some more, we must unfocus the link tag for 1 second to avoid that it will be opened in an extra tab. I use here a simple way to do this, create a 'for the eye" transparent div (opacity = 0.01) that will be placed over the window content so any link on the page will be unfocused. The user will not notice any difference except that the mouse pointer can change from pointer to default and after one second it change back to pointer (IE only). I can live with that.

I accept this as an answer, but if you have better idea's let me know.

Comments