.setCapture и .releaseCapture в Chrome

Question

У меня есть компонент HTML на основе холста HTML5, который должен захватывать и освобождать события мыши. В элементе управления пользователь нажимает на него область и тянет, чтобы повлиять на изменение. На ПК я хотел бы, чтобы пользователь мог продолжить перетаскивание за пределы браузера, а для холста получить событие мыши, если кнопка вышла за пределы окна.

Однако, согласно моему чтению, 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, если вы обрабатываете mousemove в документе, тогда, если пользователь нажимает и удерживает мышь, документ будет продолжать получать события mousemove, даже если курсор покидает окно. Эти события не будут распространяться на дочерние узлы документа, поэтому вам придется обрабатывать их на уровне документа.

Answer 2

Хромированные опоры setPointerCapture, что является частью рекомендации W3C Pointer events. Таким образом, альтернативой будет использование событий указателя и этих методов.

Возможно, вы захотите использовать jquery Pointer Events Polyfill для поддержки других браузеров.