javascript - 在 mousedown 元素之外捕获 mouseup 的最佳方法

Question

$('#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.
    }
});

我试图从元素内部或外部释放的 mousedown 中捕获 mouseup 事件。这段代码几乎可以工作，但问题是 unbind('mouseup') 取消绑定附加到 mouseup 事件 (jqueryui) 的其他脚本。如果 unbind() 未设置，则代码将堆叠在 mouseup 事件中并调用 x 次，其中 x 是您按下鼠标的次数。

路线1：是否有某种自毁函数，调用一次并销毁？

路线2：在插入代码之前复制/克隆mouseup函数的任何方法，然后取消绑定，然后设置为以前的？

理想情况下，我想保持这个代码结构整洁，因为我有很多可点击的元素，所以在 element.mousedown 之外绑定 document.mouseup 会很麻烦。

这是我忘记添加的小提琴http://jsfiddle.net/9gFNk/

Answer 1

可以给你的click事件一个命名空间，这样只有命名空间的事件会被解除绑定，而不是其他任何事件

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

        //Do some magic here 

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

Answer 2

我创建了一个全局对象来从文档中捕获鼠标事件。它目前只为 mouseup 设置，但可以很容易地为其他人扩展。mouseup 代码仍然可以在可点击元素的 mousedown 函数中自定义，因此如果您像我一样有很多可点击的东西，它会很方便。

    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.
        }
    });

Answer 3

如果可能发生“on”事件，它可能不是一个精确的解决方案。请参考此代码

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

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