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.
Related
I'm trying to detect whether a pointing device is being used on the page. $(document).on('mouseover') is being used to trigger a global variable, with the idea that any click before this happens signifies that a pointing device is not connected. Unfortunately, mousedown or pointerdown are triggering the mouseover BEFORE I have a chance to set a false value. Is there a way to catch the click before the mouseover fires? Is there something I can test for when the mouseover fires that will tell if the mousedown is also fired?
I don't think your approach is accurate, you won't be able to catch mouseover before mousedown, think about it... it's not natural that it happen that way. What are you actually trying to change in your web?
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.
Is there any way in Javascript to tell what the most recently-fired event was? Reason I'm asking is I'm working on a site that isn't behaving properly on one of those new Ultrabooks that's running Windows 8 and is a laptop with a touch screen. If you use the standard mouse functionality (with a touchpad or an actual mouse), things work fine, but if you use the touch screen, things don't.
This only happens with IE; Chrome has its own issues (which I have fixed in the code), and Firefox hasn't given us any problems.
Basically, the functionality we have includes a "hoverIntent" block, and if you use the touch screen on IE, it registers both the "over" and "out" functions, which is a problem.
However, if there was a way for me to tell whether the last thing that happened was that the user TOUCHED THE SCREEN or CLICKED WITH A MOUSE, I'd have a solution in place. But I couldn't tell if there's a way to do that.
The only thing I could find was tacking on ".data('events')" on an element, but what returns is "click" regardless of whether it was an actual mouse click or a tap on the screen.
Is there a way to do this?
The browser does not have a standard way of recording events that happened previously. If you want to know what events happened prior to the current event, then you will have to install an event handler for those events and record them yourself so you can then look back at them at some future time.
For events that propagate, you could install some event handlers on the document object and record both event and target for the last N events.
If you're just trying to figure out what event the current event is, then you can examine the type property of the event object that is passed into the event handler as in e.type.
You can add an event to your function arguments and then use event.type to check which event is triggered.
ex:
var x = function(e) {
alert(e.type);
}
So I found out that IE has a completely different set of touch events from what EVERY OTHER BROWSER IN THE UNIVERSE has. ughhh. Instead of "touchstart," you use "MSPointerDown," etc. My solution was basically to write new event handlers for MSIE's touch device events.
I've an element that can be dragged using native HTML5. It has dragstart, drag, and dragend event listeners assigned to it. In addition, I also have keydown and keyup event listeners assigned to document.body element.
When dragging the draggable element, ondrag event will fire as expected. When I press & release any key while not dragging anything, document.body keydown/up events will fire.
However, if I keydown/up while performing ondrag, the document.body keydown/up event will not fire. Is there any workaround/hack to this?
Answering my own questions... From Drag Operations - MDN:
With the dragenter and dragover event, the dropEffect property is
initialized to the effect that the user is requesting. The user can
modify the desired effect by pressing modifier keys. Although the
exact keys used vary by platform, typically the Shift and Control keys
would be used to switch between copying, moving and linking.
On HTML5 native drag, the only key press that can trigger anything is the modifier keys. On Mac, it's the option key and the control key. Action is captured via event.dataTransfer.effectAllowed, not keypress or keydown events.
In IE, if flash has focus, and receives a keydown event, it does not appear to bubble the event up through the DOM (I can't capture the event by listening on document, however the same listener can capture key events from html siblings, so I know my listener is working).
However, some other plugins on the page (I am looking at you windows media player) still respond to key events that initiate in flash (and I need to prevent that from happening)! It seems that the key event initiated in flash takes the bubble express highway straight to the top (where the top is whatever is above document in the DOM hierarchy).
I have tried terminating the events in as3, and tried different wmodes... neither approach works. Is there something I might have missed?
Focus just the swf container :
document.getElementById('flash-object').focus();