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函数的任何方法，然后取消绑定，然后设置为previous？

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

这是小提琴，我忘记添加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代码仍然可以在可点击元素的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/

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

3 个答案: