如何在mousedown元素之外捕獲mouseup事件？

如果在觸發了onmousedown的元素外部釋放鼠標按鈕，則不會觸發Javascript onmouseup event。如何在mousedown元素之外捕獲mouseup事件？

這會導致拖拽& JQuery UI中的拖放錯誤：當鼠標按鈕釋放到其容器之外時（因爲元素在到達其父邊界時停止移動），元素不會停止拖動。重現步驟：

轉至http://jqueryui.com/draggable/。
將可拖動向下直到鼠標已離開周圍容器
釋放鼠標按鈕（沒有鼠標按鈕被按下在這一點）
移動鼠標回到容器
而拖動仍然被拖動。我希望拖動一旦我釋放鼠標按鈕即停止 - ，不管它在哪裏發佈，它都是。

我在最新的Chrome和IE中看到了這種行爲。

是否有任何解決方法？

我知道，我們可以停止拖動容器上mouseout或mouseleave，但我想繼續拖拉，即使我父容器外，很像google maps（不管，你鬆開鼠標，它總是停止拖動地圖）。

來源

2014-01-12 Domi

'containment：'parent'' ??? http://jsfiddle.net/4wX58/ –

PS：我發現當鼠標按鈕被釋放到文檔之外時，元素仍然是可拖動的：（ –

我發現解決方案：只需將mouseup事件處理程序附加到document。那麼即使您在瀏覽器外部釋放鼠標按鈕，它也會一直取消。

當然，這不是一個漂亮的解決方案，但顯然，這是讓拖動正確工作的唯一方法。

來源

2014-01-12 11:11:41 Domi

）謝謝，我只是在尋找如何跟蹤文檔之外的光標（或者如果有一種方式），並看到這一點，我沒有注意到谷歌地圖做到了，儘管我注意到其他一些網站沒有做到這一點，當它們不這樣做時很煩人。自己的答案，它幫助我了！ –

這隻會解決問題，如果您在文檔（或窗口）之外釋放鼠標按鈕，則會遇到同樣的問題。這可以通過解決方案克服。 – Mog0

@ Mog0當您在文檔的外部釋放鼠標按鈕時，您是否可以製作一個小提琴？這個對我有用。 – Domi

處理此問題的最佳方法是檢查mousemove事件處理程序中的當前按鈕狀態。如果該按鈕不再停止，請停止拖動。

如果您將mouseup事件放在文檔上，那麼您只是將問題向上移動，如果您在文檔之外（甚至在瀏覽器窗口外）釋放按鈕，原始問題仍然會顯示。

例如使用jQuery

$div.on("mousedown", function (evt) { 
     dragging = true; 
    }).on("mouseup", function (evt) { 
     dragging = false; 
    }).on("mousemove", function (evt) { 
     if (dragging && evt.button == 0) { 
      //Catch case where button released outside of div 
      dragging = false; 
     } 
     if (dragging) { 
      //handle dragging here 
     } 
    });

你可以跳過鼠標鬆開事件處理程序，因爲這將鼠標移動被抓，但我認爲這是它更具可讀性仍然存在。

來源

2014-12-03 16:30:38 Mog0

我更喜歡這個解決方案，除非我發現該屬性（至少在Firefox上）是mouse.buttons，而不是mouse.button。 mouse.button對我而言始終爲0 –

@ErinDrummond看起來很棒。 evt.button == 0表示IE <= 8沒有按鈕，但在Firefox和更新的IE上保留按鈕。然而，evt.buttons僅在IE9 +和Firefox上可用，在Chrome，Safari和Opera上不受支持。 – Mog0

你有工作小提琴嗎？我無法讓它在Chrome上運行：[http://jsfiddle.net/Ldqaxj12/](http://jsfiddle.net/Ldqaxj12/） - 這個解決方案是否可移植？ – Domi

如何在mousedown元素之外捕獲mouseup事件？

回答

相關問題