touchstart vs touchbegin events - javascript

What is the right choice for targeting the touch events on mobile devices?
There's no a single word about touchbegin at https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events, while I've seen many plugins that use touchbegin event instead of touchstart.
What is the difference between them?

touchstart:
When a touchstart event occurs, indicating that a new touch on the surface has occurred.
This is (touchstart, touchend, etc.) are available at the front end and you can control it via javascript/jQuery.
touchbegin:
Where i got it is an event in the objective-c and you can't track/controll it on frontend.

There is no touchbegin event native in JavaScript. If plugins are using touchbegin they must be defining it themselves.
touchstart on the other hand is native to JavaScript, and if you're wanting to track touch events this is what you'd use.

Related

How do I check if a event is triggered or when to use keypress versus keyup?

I've added page navigation to the window using the keypress event and noticed it's not working on some browsers. If I use keyup in those browsers the event is triggered.
So my question can be solved by knowing either:
For most browser compatibility do I use keyup or keypress? Can I
use both?
How do I test if an event is supported? For example, if I know the
brower supports keypress I'll add a handler for it. If it supports
keyup, I'll add a handler for that. I can add the event handler
dynamically.
History:
In ES4 there was a willTrigger method but I don't see that method in the DOM.
Update:
I found a possible answer here. It says that in some browsers keypress is dispatched where is does not make any distinction when mentioning keyup.
To quickly differentiate between keypress and keyup, keyup will fire only once, no matter how long a key is pressed down for , whereas the keypress event can fire multiple times. You can use both (I don't see why not - you'd use them for different things) , and basic support for the events is present cross-browser (although figures for mobile browser support is not fully known). There are jquery equivalents of both the .keyup()/ onkeyup and .keypress() / onkeypress
Hope this helps

ignoring a touchend event when preceded by a touchmove event

Using jquery, I have an event that fires on touchend. I do not want that event to fire when the user scrolls (touchmove). The only thing I've found on SO is this this, but I don't like it. It feels hacky. It hurts my head to think that there isn't away to figure this out without setting a global flag, simply to check if a touchmove has occurred.
Is there anyway to figure the order of events out? Some wrapper that encapsulates all the touch events that occurred. Because this is for work and the powers that be don't want to bloat our code base with libraries, I can't use an external library, but if anyone knows a library that has this functionality that i could peruse for inspiration that would also be helpful.

Simulating touch event on YUI 3

I want to simulate / fire a touch event (touchstart or touchend) on a link with YUI 3.
The function .simulate doesn't handle the 'touch event', but only click/dblclick etc....
When i search in the official doc, there is nothing about it on the event section.
Is there anyway to do this ?
Thanks
I'm not sure you can use touchstart or touch{move,end} on non-touch device.
Maybe you want to try to fire a 'gesturemovestart', that should be cross-device.
Y.one.('#yourLink').fire('gesturemovestart')
See http://yuilibrary.com/yui/docs/event/touch.html#move
When the link is clicked, I fire 'gesturemovestart': http://jsfiddle.net/DrMw8/
Best regards,
Ludo
No, there is no support for simulation of touch events yet. It's documented here: http://yuilibrary.com/yui/docs/event/simulate.html#no-touch-events-yet

Is FastClick needed for normal hyperlink when used in mobile webkit?

The FastClick library enhanced the responsiveness on JavaScript's onClick event when used under Webkit, but will it improve the responsiveness of a normal hyperlink? (e.g. <a href=''...) ?
Looking through the FastClick code, it would seem it will work on ANY DOM object that inherits from HTMLElement (most all DOM objects) and supports the click event (and/or touch events if on a touch-enabled device).
This means that it should work on Anchor tags as well.
For reference, here is the only chunk of code in the FastClick source that does any kind of validation on the passed in object...
if (!(layer instanceof HTMLElement)) {
throw new TypeError('Layer must be instance of HTMLElement');
}
A normal anchor element will navigate the browser when the click event is fired. On mobile that click registers 300ms after the touchstart. Using FastClick and a custom window.location change, will indeed speed things up.
PS: I figured you are asking if default links, without custom JS handlers attached, will be faster with FastClick; they won't, you will have to add your own custom handler. You could easily do this by delegating from a HTML element high up, say body. You could use jQuery with the excellent: .on( events \[, selector\] \[, data\], handler(eventObject) )

Javascript Touch Object

I am trying to differentiate a click from a swipe in Javascript using touch events. I would like to know, is there a property in the touch event object that can be inspected to determine the difference on a 'touchend' event, or do you have to listen for both a touchstart or touchend AND a touchmove event? I am trying to minimise the number of event listeners I have to add to the DOM and am wondering if it is possible to do this by observing a single event? Specifically I am looking at webkit on iOS.
Don't bind to the click event at all. It responds much slower than the collection of touch events.
To check for a swipe, you need to listen for the touchstart and touchend events. Don't worry about touchmove unless you're planning on doing something when that event fires.
On the touchstart event, you will need to record the x/y position of the event. On the touchend event, do the same again. What you'll also need is some kind of threshold value, so that when you calculate the difference between x1-x2 and y1-y2 you can determine if it was a swipe or not.
Apple gives a meta-algorithm that involves touchmove here http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html. Search on that page for "identify a swipe" and you'll find it.
I personally have never needed to use touchmove and successfully have used the technique I described above. However, either is a valid approach so you should investigate what works best for you.

Categories

Resources