jQuery在一個元素內檢測mousedown，然後在元素外面mouseup

我有一些類似於繪圖畫布的東西，爲了撤銷目的，我在mouseup上捕獲它的狀態。畫布不是全屏，因此您可以使用畫筆進行繪製並在畫布外釋放。類似這樣的：jQuery在一個元素內檢測mousedown，然後在元素外面mouseup

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

但是這當然不起作用。簡單的$（document）.mouseup也不起作用，因爲我有很多其他UI元素，並且每次單擊UI元素時它都會保存狀態。

任何想法？

來源

2010-11-30 Duopixel

var isDown = false; 

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

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

爲了簡單起見，我把isDown放在全局命名空間中。在生產中，您可能想要隔離該變量的範圍。

來源

2010-11-30 02:10:26 mike

工程就像一個魅力，謝謝！我掙扎了好幾個小時。 – Duopixel 2010-11-30 02:34:04

*重要*選擇文本時至少不能使用（至少在Chrome中，因爲它將被視爲拖動事件）。看到我的答案下面的解決方法 – bcoughlan 2011-03-16 22:55:52

希望你找到這個小解決方案是有幫助的。你可以看到它在這裏的行動：選擇文本時 http://jsfiddle.net/neopreneur/PR2yE/

$(document).ready(function(){ 
    var startMouseDownElement = null; 

    $('#element').mousedown(function(){ 
     // do whatever 
     //... 

     // set mousedown start element 
     startMouseDownElement = $(this); 
    }); 

    // handle bad mouseup 
    // $('#container, #container *').mouseup would be more efficient in a busy DOM 
    $('body *').mouseup(function(event){ 
     event.stopPropagation(); // stop bubbling 
     if($(this).attr('id') != $(startMouseDownElement).attr('id')){ 
      //oops, bad mouseup 
      alert('bad mouseup :('); 
     } 
    }); 
});

來源

2010-11-30 02:34:25

以上答案都不行。

修復的方法是被選中停止文本時，按下鼠標時，當它的備份重新啓用它：

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

那麼你的JS：

在你的CSS

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

來源

2011-03-16 23:01:08 bcoughlan

GWT中可能實現的mike和waitingforatrain的答案。在HTML頭管理鼠標向上事件（JavaScript代碼）：

var mouseUpHook = false; 
    $(document).mouseup(function() { 
     if (mouseUpHook) { 
      mouseUpHook(null); 
      mouseUpHook = false; 
     } 
    });

讓你自定義的Widget類實現MouseDownHandler和MouseUpHandler，並在構造函數中添加這些行接收鼠標事件（java代碼）：

addDomHandler(this, MouseDownEvent.getType()); 
    addDomHandler(this, MouseUpEvent.getType());

最後，添加這些方法在自定義Widget類（Java和JavaScript代碼）：

@Override 
public void onMouseUp (MouseUpEvent event) { 
    removeMouseUpHook(); 

    // ... do something else 
} 

private native void hookMouseUp() /*-{ 
    $wnd.$('body').addClass('noselect'); 
    var myThis = this; 
    $wnd.mouseUpHook = function() { 
     [email protected]::onMouseUp(Lcom/google/gwt/event/dom/client/MouseUpEvent;)(null); 
    }; 
}-*/; 

private native void removeMouseUpHook() /*-{ 
    $wnd.$('body').removeClass('noselect'); 
}-*/; 

@Override 
public void onMouseDown (MouseDownEvent event) { 
    hookMouseUp(); 

    // ... do something else 

    event.preventDefault(); 
}

最後一行是有用的，以防止圖像拖動。事實上，用戶選擇：沒有不足。

來源

2012-08-16 13:17:53 makeroo

如果你有很多像我一樣的可點擊元素，你會想要創建一個全局鼠標捕捉器，並將鼠標點擊代碼放在單擊元素的mousedowns中。這是我使用的代碼。

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

來源

2013-11-09 05:19:11 louisinhongkong

jQuery在一個元素內檢測mousedown，然後在元素外面mouseup

回答

相關問題