Best Way To Catch Mouseup Outside Of Mousedown Element

$('#clickableElement').bind({ mousedown: function(e) { console.log('mousedown on element'); $(document).bind('mouseup',function(e){ console.log

Solution 1:

Can giv your click event a namespace so only that namespaced event gets unbound, and not any others

   $(document).on('mouseup.clickableElement',function(e){
        console.log('mouseup caught');

        //Do some magic here 

        $(this).off('mouseup.clickableElement');
    });

Solution 2:

I created a global object to catch mouse events from the document. It's currently set for mouseup only but can be easily expanded for others. The mouseup code is still customizable within the mousedown functions of the clickable elements so it this handy if you have lots of clickable things like I do.

varMouseCatcher=function()
    {
        this.init=function()
        {
            var mc = this; 
            $(document).bind({
                mouseup:function(e) 
                {
                    mc.mouseup();
                }
            });
        }
        this.mouseup=function()
        {
            returnfalse;
        }
    }
    var mouseCatcher = newMouseCatcher();
    mouseCatcher.init();



    $('#clickableElement').bind({
        mousedown: function(e)
        {
            console.log('mousedown on element');

            mouseCatcher.mouseup=function()
            {
                console.log('mouseup called from MouseCatcher');
                this.mouseup = function(){returnfalse;}
            }

        },
        mouseup:function(e)
        {
            //mouseup within element, no use here.
        }
    });

Solution 3:

With "on" event its possible, its may not be an exact solution. Please refer this code

    $(document).on('mousedown', function() {
        $('#clickableElement').css('display', 'none');
        $(document).bind('mouseup', function() {
             $('#clickableElement').css('display', 'block');
        });
    });

http://jsfiddle.net/9gFNk/13/