.setCapture和.releaseCapture在Chrome中

Question

我有一個基於HTML5 canvas的Javascript組件需要捕獲和釋放鼠標事件。在控制中，用戶點擊其中的區域並拖動以影響改變。在PC上，我希望用戶能夠繼續拖動到瀏覽器之外，並且如果該按鈕被釋放到窗口之外，畫布可以接收鼠標向上事件。

但是，根據我的看法，setCapture和releaseCapture在Chrome上不受支持。

是否有解決方法？

Answer 1

2009年編寫的一篇文章詳細介紹瞭如何實現跨瀏覽器拖動，即使用戶的光標離開窗口，拖動也將繼續觸發mousemove事件。

http://news.qooxdoo.org/mouse-capturing

下面是文章的基本代碼：

function draggable(element) { 
    var dragging = null; 

    addListener(element, "mousedown", function(e) { 
     var e = window.event || e; 
     dragging = { 
      mouseX: e.clientX, 
      mouseY: e.clientY, 
      startX: parseInt(element.style.left), 
      startY: parseInt(element.style.top) 
     }; 
     if (element.setCapture) element.setCapture(); 
    }); 

    addListener(element, "losecapture", function() { 
     dragging = null; 
    }); 

    addListener(document, "mouseup", function() { 
     dragging = null; 
    }, true); 

    var dragTarget = element.setCapture ? element : document; 

    addListener(dragTarget, "mousemove", function(e) { 
     if (!dragging) return; 

     var e = window.event || e; 
     var top = dragging.startY + (e.clientY - dragging.mouseY); 
     var left = dragging.startX + (e.clientX - dragging.mouseX); 

     element.style.top = (Math.max(0, top)) + "px"; 
     element.style.left = (Math.max(0, left)) + "px"; 
    }, true); 
}; 

draggable(document.getElementById("drag")); 

本文包含發生了什麼事情的一個很好的解釋，但有些情況下，假設知識少的缺口。基本上（我認爲），在Chrome和Safari中，如果您在文檔上處理鼠標移動，那麼，如果用戶單擊並保持鼠標，即使光標離開窗口，文檔也會繼續接收鼠標移動事件。這些事件不會傳播到文檔的子節點，因此您必須在文檔級別處理它。

Answer 2

Chrome支持setPointerCapture，這是W3C Pointer events建議的一部分。因此，另一種方法是使用指針事件和這些方法。

您可能想要使用jquery Pointer Events Polyfill來支持其他瀏覽器。