PointerEvents may not be generated if mouse is dragged outside the frame about pep HOT 8 CLOSED

IE fires events outside of the window when the pointer is captured.
I believe most browsers process mouse events outside the window if you listen to events on the window element too.

from pep.

Actually, PointerEvents seem to work fine if you listen on the html element. You can see this in action with:

http://the-grid.github.io/the-graph/the-graph-editor/

Just resize the window to not be fullscreen and start dragging the canvas slowly with mouse. It will still move when pointer is outside of the window, so we receive both pointermove and pointerup still. With touch in the same case you stop receiving events when finger leaves the window.

In this case the PointerEvents are listened on document.getElementsByTagName('html')[0]. On body the events stop coming when mouse leaves the window.

So I guess this is mostly a case of documentation, it looks like the polyfill works as it should.

(Note: this was tested on a Chromebook)

from pep.

On our the-behavior custom element we exposed setting the PointerEvent source in the following way:

<the-behaviors listento="html">
    <the-behavior type="drag" action="attribute" accept="tagName=BODY" mindistance="20"></the-behavior>
    <the-behavior type="swipe" direction="north" action="remove" accept="tagName=DIV"></the-behavior>
</the-behaviors>

Without the listento attribute we would add the event listeners to the parent element of the-behaviors element, but you can also set it to html to handle the mouse leaves window corner case. Works quite nicely.

from pep.

The only point of difference is when capturing events.
The polyfill definitely doesn't fire events when the mouse is outside the window and we are capturing the pointer events on an element within the body for example.

Internet explorer sends events to captured elements when the mouse leaves the window. So potentially the pollyfill should be attaching listeners to the html element when pointers are captured.

from pep.

@stakach By "capturing" do you mean Pointer Capturing: setPointerCapture, or listening to events at the capture phase: addEventListener(event, eventHandler, true) ?

from pep.

Sorry, I should have been clearer. I meant Pointer Capturing with setPointerCapture

from pep.

@stakach @bergie I just did some preliminary testing on IE 10 & 11, and Chrome 31 and Canary with this test: https://gist.github.com/azakus/7650864

In all cases, I could receive pointermoves after capturing on pointerdown on the orange square.

from pep.

@azakus Agreed: https://dl.dropboxusercontent.com/u/30774132/angular-example/dragtest/test.html

from pep.