如何讓mouseup在mousemove完成後觸發

似乎只有當mouseup事件不與mousemove結合時纔會觸發mouseup事件。換句話說，按下鼠標左鍵並放開，mouseup被觸發。但是，如果拖動圖像然後放開，則不會觸發鼠標懸停。下面是顯示了這種行爲的一個例子：如何讓mouseup在mousemove完成後觸發

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<div id="Out"> 
    <img id="Img" src="http://sstatic.net/so/img/logo.png" width=500> 
</div> 
<script language=JavaScript> 
    $(function() { 
     $(document).bind("mouseup",function() {alert("UP");}); 
     //$("#Out").bind("mouseup",function() {alert("UP");}); 
     //$("#Img").bind("mouseup",function() {alert("UP");}); 
    }); 
</script>

如果加載此，點擊並放手，「UP」將提醒。但是，如果您拖動然後放開，則不會觸發UP。

如何在mousemove完成時發生mouseup火災，或者如何檢查mousemove事件以確定鼠標左鍵已關閉？

來源

2009-12-15 jlarson

這是一個我使用的模式很多，通常很好地處理與mousemove有關的所有事情。當用戶點擊mousedown時，mouseup事件被綁定，當用戶放開鼠標按鈕時，不管它移動了多少，這會強制它被觸發。

$('#element').mousedown(function(e) { 

    // You can record the starting position with 
    var start_x = e.pageX; 
    var start_y = e.pageY; 

    $().mousemove(function(e) { 
     // And you can get the distance moved by 
     var offset_x = e.pageX - start_x; 
     var offset_y = e.pageY - start_y; 

     return false; 
    }); 

    $().one('mouseup', function() { 
     alert("This will show after mousemove and mouse released."); 
     $().unbind(); 
    }); 

    // Using return false prevents browser's default, 
    // often unwanted mousemove actions (drag & drop) 
    return false; 
});

來源

2009-12-15 19:26:39

不錯。它有效，但只有一次。我做了一個快速的改變，並且無縫地爲整個頁面起作用。 HTTP：// jsbin。com/ajidi從那裏可能會做得更好，但我認爲這是一個非常酷的解決方案。 – 2009-12-15 19:37:47

這看起來很好孤立，希望我可以把它整合到真正的交易，然後我會檢查這個答案 – jlarson 2009-12-15 19:54:37

偉大的作品。謝謝 – jlarson 2009-12-15 22:34:43

從JQuery 1.4開始，您需要用$（'document'）替換$（）。實際上，我正在使用它在JQuery UI對話框中創建一個菜單，這看起來會捕獲mousemove事件。所以我簡單地用我的容器div替換$（）（它看起來像$（'＃myContainerDiv'））。這似乎也很好。

來源

2010-08-30 15:36:22

不要忘了你的命名空間，否則事件的所有事件處理程序將綁定：

$('#element').bind('mousedown.namespace', function(e) { 
    $(document).one('mouseup', function() { 
     callback_func(); 
     $(document).unbind('mousedown.namespace'); 
    }); 
});

來源

2010-11-23 10:38:05 alex

我真的需要感謝你！我完全迷失了，並且很長一段時間都不知所措，爲什麼mouseup事件不會發射......這個評論帶來了輕鬆的迴歸！ – 2013-10-01 02:43:11

偉大的解決方案。我嘗試了很多其他的替代方案，但沒有成功，因此我們嘗試了跨元素mousedown-mouseup的情況。將'click'添加到'one'事件完成了我需要的實現，用於用戶不將鼠標拖動到綁定元素之外的情況。 – berbt 2014-05-20 21:11:42

我發現，當我使用下面的CSS設置我的文字爲不可選擇的mouseup事件被作爲抑制好吧 - 也許這會幫助別人。

-moz-user-select: none; 
-khtml-user-select: none; 
user-select: none;

來源

2012-09-18 18:29:18 TimDog

我遇到了KineticJS對象的類似問題。使用kinetic的dragend而不是mouseup解決了這個問題。

來源

2014-01-02 16:36:28

我有一個類似的問題，這個工作對我來說：

$(document).on("dragend", function(e){ 
    $(e.target).trigger("mouseup"); 
    e.preventDefault(); 
});

來源

2015-07-22 07:05:37

我遇到了同樣的問題。即使在mousedown處理程序中添加e.preventDefault()後，它仍然沒有解決。

最後，我發現如果我在我的mousemove處理程序中關閉以下代碼，我的mouseup處理程序就會正常調用。

 mouseDragArea.css({ 
     top: dragAreaPos.y + 'px', 
     left: dragAreaPos.x + 'px', 
     width: Math.abs(mouseCurPos.x - mouseClickPos.x) + 'px', 
     height: Math.abs(mouseCurPos.y - mouseClickPos.y) + 'px' 
    });

mouseDragArea是編程創建的元素，其中有一個虛線邊框顯示的矩形區域通過鼠標點擊，拖動：

mouseDragArea = $('<div id="mouse-drag-area"></div>');

然後，我意識到這#mouse-drag-area元素高於處理mouseup事件的原始元素。因此，添加以下的CSS聲明#mouse-drag-area後，將垃圾分類：

pointer-events:none;

在另一個字，關鍵是哪些元素要設置你的鼠標鬆開處理程序。

來源

2016-04-01 09:59:03 gm2008

如何讓mouseup在mousemove完成後觸發

回答

相關問題