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

$('#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:是否有某种自我毁灭function可以自我调用并摧毁?

路由2:在插入代码之前复制/克隆mouseup函数的任何方法,然后取消绑定,然后设置为previous?

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

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

可以将您的click事件命名为命名空间,这样只有该命名空间事件才能解除绑定,而不是任何其他事件

  $(document).on('mouseup.clickableElement',function(e){ console.log('mouseup caught'); //Do some magic here $(this).off('mouseup.clickableElement'); }); 

我创建了一个全局对象来捕获文档中的鼠标事件。 它目前只设置为鼠标,但可以轻松扩展到其他人。 mouseup代码仍然可以在clickable元素的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. } }); 

随着“on”事件的发生,它可能不是一个确切的解决方案。 请参考此代码

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

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