Don't register mouse events if pointer events are supported. #96
Conversation
|
I'm afraid I don't think this is the right fix, even if we clear out pointer events, touch events are still going to be fired. |
|
Okay finally figured out what the issue is, don't have a solution yet, but the issue also exists in Blockly as well. The issue only repro's on Chrome, when in an iframe, and with touch (either from the dev tools on on an Android). but basically when in an iframe and on a touch device, I'm getting both Pointer and Mouse events for clicks on various elements. A good test in pxt-blockly / scratch-blocks is the numpad picker, and for Blockly just the standard number field (it pops up the alert dialog twice after one click). @rachel-fenichel any ideas? |
|
Oh gosh, iframes again. For the sake of testing, this instance of Blockly is in an iframe: https://developers.google.com/blockly/ No immediate solutions. I'll have to think. |
|
Just dropping this here as it might help, I found someone else (a different project) that ran into this issues months ago, and it looks like they haven't figured out a fix but here it is for reference: |
|
Although the Blockly hosted at https://developers.google.com/blockly/ doesn't have the changes in develop that enabled pointer events. The issue is the same with touch events where you get a touchstart -> mousedown event and e.preventDefault doesn't cancel it. |
|
Another repro: same setup (iframe + touch), create a variable button triggers the callback twice. repros in blockly develop. |
|
I'm leaning towards the initial solution which is to handle either mouse or pointer events but not both. |
|
Tried out Firefox + touch, don't seem to be running into much trouble after dropping mouse events (when pointer events are supported) |
|
This looks right to me. Obviously I'm still confused about iframes and how they cause these problems, but this looks like a reasonable solution since pointer events are supposed to replace mouse events, not just supplement them. |
Register event if name not in touchmap. (for other events)
|
I just tested https://github.com/google/blockly/pull/1614/files on my github.io site and I'm having problems. Testing here: https://jsfiddle.net/jjpxc9f3/
Expected: Actual: Firefox version: Firefox ESR 52.6.0 (64-bit) I may disable pointer events through |
|
so Firefox doesn't support PointerEvents until version 59 on desktop (which is currently in Beta). The responsive design mode with touch simulation isn't an accurate representation of an Android device (and I think is more trying to simulate a touch device, like say Surface Book), I tested this with Firefox 59 (beta) and it returned an object for window.PointerEvent even though it's not supported on Android. The touch simulation issue with the Create variable button has nothing to do with the pointer events change, you can try this with develop blockly and the same issue exists. (Not saying we shouldn't investigate this) |
|
Tested this change on Chrome Android and Firefox Android and all is well :) |
Chrome on touch devices fires both a pointer and a mouse down (click) event when a user taps (ie: no drag).
This is problematic as it triggers event handlers that register on 'mousedown' twice. eg: in the case of field_number's numPad hitting a key triggers the handler twice (once for PointerEvent and another for MouseEvent).
I don't see any reason to register both pointer and mouse events if the former is supported.
@rachel-fenichel any thoughts? do you know of any reason to keep both events if pointer events are supported? or do we need the two event handlers. If so, we'll have to figure out some way to detect the 'tap' and only call the event handler once.