一个元素中的jQuery检测mousedown，然后在元素之外的mouseup [英] jQuery detect mousedown inside an element and then mouseup outside the element

问题描述

我有一个类似于绘图画布的东西，并且捕获它在mouseup上的状态以进行撤消。画布不是全屏幕，所以你可以用画笔绘制并在画布之外释放。这样做：

  $（＃element）。mousedown（function（）{
 $（document） .mouseup（function（）{
 // do something 
}）; 
}）; 
  

但这当然不行。一个简单的$（document）.mouseup也不起作用，因为我有很多其他UI元素，并且每次点击一个UI元素时都会保存状态。

任何想法？

解决方案

  var isDown = false; 
 
 $（＃element）。mousedown（function（）{
 isDown = true; 
}）; 
 
 $（document）.mouseup（function（）{
 if（isDown）{
 // do something 
 isDown = false; 
} 
}）; 
  

为了简单起见，我把 isDown 在全局命名空间中。在生产中，您可能希望隔离该变量的范围。

I have something similar to a drawing canvas, and I capture it's state on mouseup for undo purposes. The canvas isn't full screen, so you can draw with a brush and release outside the canvas. Something like this:

$("#element").mousedown(function(){
  $(document).mouseup(function(){
    //do something
  }); 
});

But this doesn't work of course. A plain $(document).mouseup doesn't work either, because I have many other UI elements and it saves the state each time you click on a UI element.

Any ideas?

解决方案

var isDown = false;

$("#element").mousedown(function(){
    isDown = true;
});

$(document).mouseup(function(){
    if(isDown){
        //do something
        isDown = false;
    }
}); 

For the sake of simplicity I put isDown in the global namespace. In production you would probably want to isolate the scope of that variable.

这篇关于一个元素中的jQuery检测mousedown，然后在元素之外的mouseup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！