I originally wanted to track one-finger panning on mobile webkit (iOS/Android). I found Creating a "sticky" fixed-position item that works on iOS Safari and I saw gesturechange. But as far as I tried, gesturechange only seems to be fired for two-finger move. Then I found touchmove event and it seems I can use that.
What are differences between touchmove and gesturechange?
Is it right to use touchmove for detecting one-finger panning?
1.Touchmove, touchstart, touchend, touchcancel are part of the multi-touch sequence. A multi-touch sequence begins when a finger first touches the surface.
gesturechange, gesturestart, gestureend are still part of multi-touch sequence but they contain more precise objects. Not all devices support gesture events. They contain scaling and rotation information allowing gestures to be combined, if supported by the platform. If not supported, one gesture ends before another starts.
2.So if you are just aiming for one finger such as swipe or slider I would use just use the touchmove. Unless you really want to turn your swipe into a 3d effect or rotate it i would combine touchmove and gesturechange.
GL
source:
https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
Related
What is the reliable approach to develop a website that is used on the computer that is a hybrid, in other words have both a mouse (or a touch pad) and a touch screen and can be used by a user in both ways at the same time.
Especially the question is how to deal with the mouse cursor, that must be seen when using a mouse and is distracting once the user uses her finger.
The goal is to develop a single page, not two separate pages, one for mouse and other for the touch. Style cursor = 'none' is killing the cursor over the specified elements completely, this is not desired.
I am not talking about scrolling or zooming, but about clickable/touchable divs/spans/images, that can react some how. For instance I have a table where each cell could be clicked to mark (change color). Same with buttons, once you touch the button with the finger, the mouse cursor will stay on top of it and distract.
HTML5 does support the concept of touch events, perhaps you can dynamically change behavior/style etc in javascript based on detected events (e.g. turn your page into touch mode "cursor = none" if you detect a touch event but switch back to mouse visible style if you detect mouse move events).
This is by no means completely reliable as touchevent implementation is browser (somewhat patchy support at that), OS and possibly hardware dependent. e.g. Older OSes might translate touch event into mouse click events or older browsers might not support OS's touch events and OS fallsback to mouse click events.
See Touch And Mouse for more info that might help you.
Go to any online multitouch javascript demo page; here are some:
mdn (same as jsfiddle.net/Darbicus/z3Xdx/10/) or this. I can only post max 2 links but every online multitouch demo i could find has same behaviour as described here.
Put one finger on canvas and don't move or release it. Now put another finger on canvas and try to draw some shape by moving it (be careful not to make movement with first finger). It doesn't draw shape, touchmove event is not happening for 2nd touch! Don't release any finger yet. Try to move only first finger. Now you get touchmove event for both fingers at once and all events work fine (immediately) for both touches from now on.
I tested it on 2 different tablets with Android 4.2.2. On both tablets i tested it first with Chrome 31 and 32 and then with Firefox 26. Always same result.
Why is touchmove event not firing for second touch if first touch hasn't moved yet? How to solve this?
Google fixed this behaviour in latest Chrome beta version 33 (https://src.chromium.org/viewvc/chrome?revision=244063&view=revision)
Firefox and Opera still have this problem.
I'm currently building a touch enabled slider widget intended for multiple browsers. So, I have listeners for touchstart, touchend, touchmove, mousedown, mousemove, and mousedown. It works great except on Mobile Safari.
If I long press on my target, a mousemove event fires with the coordinates of the previous touch causing jitter.
How do I prevent or filter out this mousemove event without causing problems with desktop interaction?
Have you considered using Swipe JS ? http://swipejs.com/
The sequence of events for a long press in mobile safari is touchstart, mousemove, touchend. This is different from a valid mouse move (mousedown, mousemove, mouseup) and a valid touch (touchstart, touchmove, touchend). If you call prevent default for all the valid events, you won't get extra notifications. So, if you track that the slider is moving with a mouse independently from moving in response to touch, the mousemove occurs outside of a normal sequence and can be safely ignored.
I want to know if there is a way to detect user is doing pinch zoom.
I want to do two things when user zooming in:
let the div align the left side of screen
set the width of div equal to the viewport width
I found Android has touchstart, touchend and touchmove, but they won't be triggered during multitouch. I want to complete above function right after finishing zooming.
Are there any other approaches?
I am not doing the web app. I am just adding some functions to the mobile version.
Android browser supports touchstart, touchend & touchmove with JavaScript, but the problem with older androids is the number of touches these events are detecting.
For example, this code will log the message on IOS and on newer android devices:
var obj = document.getElementById('elmId');
obj.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 2) {
console.log("exactly 2 fingers gesture inside elmId ");
}
}, false);
Older androids will do nothing because event.targetTouches.length will never be equal to 2.
IMHO, you should use this approach that will support most devices and provide a fallback option for older devices (use other gestures for zooming like double tap or a button to zoom).
Android has a ScaleGestureDetector. Here's an example. However, if you require additional multitouch support, e.g., rotation, I would recommend this library. I have used it personally (to store and retrieve transformation matrices of multiple images) and found it an excellent resource.
I have a canvas object which once you mousedown, it will begin "sliding" the content of the canvas until you mouse up. It does not seem like mousemove is triggered for hand-held devices (my Kindle Fire).
I've noticed though that google maps is able to achieve this effect, so how do they do it? What is the accepted method for determining the position of someone dragging their finger across a canvas object?
You want to use the touchmove event. It's supported on iOS and Android.