I'm developing a game in canvas that interprets "wheel" events as a command to zoom in/out on the scene. I was playtesting in Edge on my laptop when I realized that Edge was not firing "wheel" events while 2-finger scrolling on my precision touchpad.
After a little searching, I came across this official response from Microsoft which states: 'Microsoft Edge will fire Pointer Events with a pointerType of “touch” in response to PTP gestures'.
The problem is that these pointer events don't appear to exist. I added event listeners for all the pointer events and told them to log the event if it had a pointer type of "touch" but got no response (though they were triggered by the touch screen as expected). What confuses me more, is there doesn't seem to be pointer event activity of any type while making 2-finger gestures. So am I missing some non-standard event type or something? I'm pretty sure I haven't misread the article since a response to the loss of "wheel" event functionality appears to be the whole point of the work around and so leaving out events for two-finger gestures would defeat the point.
A few days later I tried again and managed to get ptp touch pointer events through
pointerdown
pointermove
pointerup
pointercancel
pointerout
Side note, "touch" pointers seem to be identical to those generated by touching the touch screen so if you need them to be distinguished like I did, you can exploit the fact that ptp gestures do not fire touch events to distinguish them.
I'm creating a website for my friends to allow them to play a higher quality online implementation of Hashiwokakero.
Some of them have tablets, and everything on the website loads perfectly fine, but when they go to touch and drag to form a bridge from one island to another, the webpage tries to scroll instead (even though there is no scrollable area!).
Currently I am detecting mouse events using the following:
this.canvas.addEventListener('mousedown',
(mouseEvent) => this.mousePressed(mouseEvent), false);
this.canvas.addEventListener('mouseup',
(mouseEvent) => this.mouseReleased(mouseEvent), false);
Is there a simple way I can go about having my mousePressed() and mouseReleased() functions invoked on mobile?
Thanks!
Similar events for touch screens will be touchstart and touchend, they are totally the same as mousedown and mouseup events for desktop. From docs:
The touchstart event is fired when one or more touch points are placed
on the touch surface.
and
The touchend event is fired when one or more touch points are removed
from the touch surface.
You can check docs for more info about touch events.
I also guess that may be you will also need to stop some events from bubbling, and if so, you can take a look at events bubbling and event.stopPropagation() to prevent them from bubbling.
If the logic should be the same for both mousedown/touchstart and mouseup/touchend events, you can bind multiple events to the listener as described here.
I am building a page that needs to work with touch and mouse interaction on PC, Mac, and mobile browsers.
In the event handler methods for touchStart, touchMove, touchEnd, and touchCancel I am calling event.preventDefault to prevent mobile browsers from firing both touch and mouse events.
This works great for mouseDown and mouseUp, which do not get fired when I touch the screen, but for some reason a short while (couple 100ms) after each touchStart is fired, the android browser still fires a mouseMove event (on the very first touchStart, this mouseMove is preceded by a mouseOver). If I touch quickly enough, the mouseMove gets fired after touchEnd (with the same delay relative to touchStart).
I'd really like to prevent any mouse events from being generated from touches and I'd also like to understand in detail what's going on here, so I have the following questions:
Is there some other touch event that I am not capturing which causes the mouseMove event?
Why is the mouseMove delayed a bit relative to the touch start?
Why isn't the mouseMove generated by any other touch events (touchMove, touchEnd)?
Do any other browsers have quirks that might generate mouse events from touches?
Is there a different cross-platform approach for preventing touch to cause mouse events? Maybe some CSS?
I'm trying to make some of my libraries work with touch devices, but I'm having a hard time trying to figure out how they're supported and how they work.
Basically, there are 5 touch events, but it seems there's consensus among mobile browsers only on the touchstart event (duh). I've created a fiddle as a test case.
I've tested this on my Galaxy Note with Android 4 on board, but you can check the link with a desktop browser too.
The goal is to try to figure out how to handle taps, double taps and long taps. Nothing fancy.
Basically, this is what happens:
The Android stock browser doesn't fire touch events. It just tries to emulate mouse clicks with taps, firing mousedown, mouseup and click events consecutively, but double taps just zoom in and out tha page.
Chrome for Android fires the touchstart event when the finger touches the screen. If it's released soon enough, it fires then mousedown, mouseup, touchend and finally click events.
In case of long tap, after about half a second it fires mousedown and mouseup, and touchend when the finger is lifted, with no click event at the end.
If you move your finger, it fires a touchmove event a couple of times, then it fires a touchcancel event, and nothing happens afterwards, not even a touchend event when lifting the finger.
A double tap triggers the zoom in/out features, but event-wise it fires the combo touchstart-touchevent twice, with no mouse events fired.
Firefox for Android correctly fires the touchstart event, and in case of short tap fires mousedown, mouseup, touchend and click afterwards.
In case of long tap, it fires mousedown, mouseup and finally touchend events. It's the same of Chrome for these things.
But if you move your finger, if fires touchmove continously (as one may expect) but it doesn not fire the touchleave event when the finger leaves the element with the event listener, and doesn't fire the touchcancel event when the finger gets out of the browser viewport.
For double taps, it behaves just like Chrome.
Opera Mobile does the same thing of Chrome and Firefox for a short tap, but in case of long press activates some sort of sharing feature that I really want to disable. If you move your finger, or double tap, it behaves just like Firefox.
Chrome beta does the usual for short taps, but in case of long taps it doesn't fire the mouseup event anymore, just touchstart, then mousedown after half a second, then touchend when the finger is lifted. When the finger is moved, now it behaves like Firefox and Opera Mobile.
In case of double taps, it doesn't fire touch events when zooming out, but only when zooming in.
Chrome beta shows the oddest behaviour, but I can't really complain since it's a beta.
The question is: is there a simple and way to try to detect short taps, long taps and double taps in the most common browsers of touch devices?
Too bad I can't test it on iOS devices with Safari, or IE for Windows Phone 7/Phone 8/RT, but if some of you can, your feedback would be very appreciated.
If you haven't already, I would suggest reading the source code for Hammer.js
https://github.com/hammerjs/hammer.js/blob/master/hammer.js
Between comments and code it's about 1400 lines, there is great documentation and the code is easy to understand.
You can see how the author has chosen to solve a lot of the common touch events:
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown,
dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight,
transform, transformstart, transformend, rotate, pinch, pinchin,
pinchout, touch (gesture detection starts), release (gesture detection
ends)
I think after reading the source code you will have much better understanding of how touch events work and how to identify which events the browser is capable of handling.
http://eightmedia.github.io/hammer.js/
There's a really excellent resource https://patrickhlauke.github.io/touch/tests/results/ that details the order of events across a staggering number of browsers. It also appears to be updated regularly (in September 2016, it was last updated August 2016).
The gist is, essentially everything triggers mouseover and related events; most also trigger touch events, which usually complete (reach touchend) before mouseover and then continue to click (unless a change to page content cancels this). Those awkward exceptions are thankfully relatively rare (3rd party android browsers and blackberry playbook).
That linked resource goes into an impressive level of detail, here's a sample of the first three of many, many operating system, device and browser tests:
To summarise some of the key points:
Mobile browsers
All listed browsers trigger mouseover on the first tap. Only some Windows Phone browsers trigger it on a second tap.
All trigger click. It doesn't specify which cancel click if mouseover changes the page (I believe most do)
Most browsers trigger mouseover after touchstart and touchend. This includes iOS7.1 Safari, stock Android, Chrome, Opera and Firefox for Android, and some (not all Windows phone browsers)
Several Windows Phone browsers (all Windows 8 / 8.1 and one version for 10) and several 3rd-party Android browsers (Dolphin, Maxathon, UC) trigger mouseover after touchstart and touchend.
Only Blackberry Playbook triggers mouseover between touchstart and touchend
Only Opera Mini and Puffin (3rd party Android browser) lack touchstart or touchend.
Desktop browsers
Reasonably up to date versions of desktop Chrome and Opera behave like their mobile counterparts, touchstart and touchend followed by mouseover.
Firefox and Microsoft browsers (IE <=11 and many versions of Edge) don't trigger any touchstart and touchend events.
No data on Macs, but presumably no Ma browsers support touchstart and touchend given the scarcity of Mac touchscreen interfaces.
There's also an incredible amount of data on browsers combined with assistive technologies.
Yes you can start a timer attouchstart and end it on touchend and make your choices from there.
Also you can make... let's say swipe, my triggering touchmove you can get the coordonates of the "finger" and see how much i traveled before touchend gets triggered.
I don't know if there's any simpler way rather than using a touch events library, but i suppose you could write one for simple 'tap', 'double tap', 'swipe' events pretty easily.
Here is my latest observation on touch and mouse events on Android 4.3
Opera, Firefox, and Chrome seem to have a standard behavior
On Swipe (touchstart-touchmove-touchend):
No mouse event(exluding mouseover) fires.
Mouseover fires only if touchstart and touchend occurs on the same element. (touchstart-touchmove-touchend-mouseover)
If default is prevented on touchstart: the default swipe behavior does not work. no changes occur regarding mouse event firing.
On Tap(touchstart-touchend):
All mouse events mouseover-mousemove-mousedown-mouseup-click fire after a delay
If default is prevented on touchstart: only mouseover fires.
Android default browser has some non-standard behaviors:
Mouseover fires before touchstart which means mouseover always fires.
All mouse events fire on Tap, even if the default is prevented on touchstart.
I am currently working on the redesign of a website following the responsive design + mobile first approach.
I am trying to detect swipe events using JS on touch-enabled devices. For this purpose, I am using the following code:
document.addEventListener ('touchstart', function(event) {
//Get initial finger coords
}, false);
document.addEventListener ('touchmove', function(event) {
//Update final finger coords
}, false);
document.addEventListener ('touchend', function(event) {
//Compare initial and final coords, trigger swipe events if necessary
}, false);
I have tested this code on an iPad 1, an iPhone 4 and several devices running Android 2.2.1, and the result when I drag my finger on the screen is what I am expecting: the touchmove event fires several times (it can easily rise up to a hundred when doing a long gesture).
The problem comes when I test it on an Android 2.3.3 device (I'm using a Samsung Galaxy S2). Using its native broswer, the amount of touchmove events is reduced to only 1 (or rarely 2).
Am I doing something wrong or is it supposed to behave like that? Has anybody found the same problem? I was unable to find documentation about the behaviour of touchmove events in this version of Andriod.
You can test it here (using a touch-enabled device): http://jsfiddle.net/xs5BG/embedded/result/
It seems that galaxy S2 doesn't fire the touchmove after the scrolling starts to work. If you do a preventDefault it fires the events as expected.
Testing your jsFiddle example with my HTC Desire Z (running 2.3.3) i get many more than just one touchmove event - as desired. So i am unable to reproduce your actual problem with this device, although on the same API Level :( Interestingly enough your code also shows the problem that i am experiencing on my current project: The first touchmove event seems to have some kind of a threshold:
Putting the finger down and only moving a tiny bit will give 0 touchmove events... once over the threshold it will trigger touchmove events in intervals of milliseconds as it then recognises each and every pixel distance of a move (like it should do). Maybe this could be related to your phenomenon, respectively do you see this on your 2.3.3 device as well?
On many android versions if you don't preventDefault on touchstart the Android device will go into default scrolling mode and stops sending touch events to webview. So you would need to
document.addEventListener ('touchstart', function(event) {
event.preventDefault();
}, false);
Now all the touch events will fire, but default scrolling will be disabled.
There is a shim to overcome this issue that emulates a swipe gesture https://github.com/TNT-RoX/android-swipe-shim