Best way to catch mouseup outside of mousedown element

杀马特。学长 韩版系。学妹 提交于 2019-12-11 06:00:40

问题


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

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

            //Do some magic here 

            $(this).unbind('mouseup');
        });

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

I'm trying to catch the mouseup event from a mousedown that's released inside or outside of an element. This code almost works, but the problem is the unbind('mouseup') which is unbinding other scripts attached to the mouseup event (jqueryui). If unbind() is not set then the code gets stacked within mouseup event and called x number of times, where x is the times you've mousedowned.

Route 1: is there some kind of self destructing function that calls itself once and destroys?

Route 2: any way to copy/clone the mouseup function prior to inserting the code, then unbind, then set as previous?

Ideally I'd like to keep this code structure for neatness as I have lots of clickable elements, so binding the document.mouseup outside of element.mousedown would be messy.

Here's the Fiddle I forgot to add http://jsfiddle.net/9gFNk/


回答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');
    });



回答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.

    var MouseCatcher=function()
    {
        this.init=function()
        {
            var mc = this; 
            $(document).bind({
                mouseup:function(e) 
                {
                    mc.mouseup();
                }
            });
        }
        this.mouseup=function()
        {
            return false;
        }
    }
    var mouseCatcher = new MouseCatcher();
    mouseCatcher.init();



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

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

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



回答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/



来源:https://stackoverflow.com/questions/19872409/best-way-to-catch-mouseup-outside-of-mousedown-element

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!