.setCapture i .releaseCapture w przeglądarce Chrome

Question

Mam komponent Javascript oparty na języku HTML5, który musi przechwytywać i publikować zdarzenia myszy. W kontroli użytkownik klika obszar wewnątrz i przeciąga, aby wpłynąć na zmianę. Na komputerze chciałbym, aby użytkownik mógł kontynuować przeciąganie poza przeglądarkę i aby płótno mogło odbierać zdarzenia myszy, jeśli przycisk zostanie zwolniony poza oknem.

Jednak zgodnie z moim zestawem do czytaniaCapture i releaseCapture nie są obsługiwane w Chrome.

Czy istnieje obejście?

Answer 1

Artykuł opublikowany w 2009 r. Opisuje, w jaki sposób można zaimplementować przeciąganie między przeglądarkami, które będzie kontynuowało uruchamianie zdarzeń myszy, nawet jeśli kursor użytkownika opuści okno.

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

Oto niezbędne kod z artykułu:

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")); 

Artykuł zawiera dość dobre wyjaśnienie tego, co się dzieje, ale istnieje kilka luk, gdzie zakłada się znajomość. Zasadniczo (myślę), w przeglądarce Chrome i Safari, jeśli obsłużysz ruch myszy na dokumencie, jeśli użytkownik kliknie i przytrzyma mysz, dokument będzie kontynuował odbieranie zdarzeń myszy, nawet jeśli kursor opuści okno. Zdarzenia te nie będą propagowane do węzłów podrzędnych dokumentu, więc należy go obsługiwać na poziomie dokumentu.

Answer 2

Chrome obsługuje setPointerCapture, który jest częścią rekomendacji W3C Pointer events. Tak więc alternatywą byłoby użycie zdarzeń wskaźnika i tych metod.

Możesz chcieć użyć jquery Pointer Events Polyfill do obsługi innych przeglądarek.