jQuery在元素内部检测mousedown,然后在元素外部进行mouseup

Question

我有类似于绘图画布的东西,我在mouseup上捕获它的状态以进行撤消.画布不是全屏,因此您可以使用画笔绘制并在画布外部释放.像这样的东西:

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

但这当然不起作用.普通的$(document).mouseup也不起作用,因为我有许多其他UI元素,并且每次单击UI元素时它都会保存状态.

有任何想法吗？

Answer 1

var isDown = false;

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

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

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

Answer 2

选择文本时,上述答案将无效.

修复是在鼠标停止时停止选择文本,并在备份时重新启用它:

在你的CSS中:

.noselect {
    /* Prevent text selection */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

那你的JS:

var myButtonDown=false;

$('.ff', ffrw).mousedown(function() {
    myButtonDown=true;
    $('body').addClass('noselect');
    //Your code here
});

$(document).mouseup(function() {
    if (myButtonDown) {
        myButtonDown = false;
        $('body').removeClass('noselect');
    }
})