I have a situation where I need to track if a user has cancelled a touch on a mobile device. I thought it would be pretty easy with touch events, but I've been stuck on it for two days now. Here's what I've been experimenting with:
$("#element)
.bind('touchstart', function() {
action1();
})
.bind('touchcancel', function() {
action2();
})
.bind('touchend', function() {
action3();
})
touchstart and touchend work fine, but touchcancel never runs. Even if I release my finger outside the element, the touchend action will run but not touchcancel.
Have you tried dragging your finger off the edge of the display panel? That used to cause a touchcancel on older android phones.
Edit: The touchcancel happens when the system needs to cancel the touch so you might experiment with application- or OS-initiated behavior that could interrupt what the user is doing. Some examples that might cause this
Receive an onscreen notification, like an incoming call
Modify the dom so the element that was the focus of the touchstart is rerendered in a different location
Remove the dom element that was the focus of the touchstart
Related
I'm using contextmenu event to capture right clicks. On touch devices that event fired via "long press".
The problem I'm experiencing is that the contextmenu event doesn't fire on touch devices until touch is released. I could listen for touchstart/mousedown events and set timeout, but it won't be accurate since each device might have its own delay for long press activation.
So, is there a way accurately detect when long press is activated on touch screen devices? (On some devices there is haptic feedback when long press was activated)
As discussed in the comment section.
On most devices contextmenu fires without releasing the touch, so in most cases it should be fine to use the contextmenu event to get the desired result.
This might be a bug in the DevTools of Chromium, since you tested with that. I recommend to simply use the contextmenu event.
In case the specific device really fires the context menu on touch release, the user expects the same behavior on your website/app, so it should be fine to go this route.
I would like for a button to react to 'touches' on a touch screen, and 'clicks' on a non-touch screen. In case of a touch screen, I only want the touchstart handler to direct my flow and prevent the system from further handling the click event.
For this, I added two event listeners to my button. One listens for touchstart events. Once a touchstart has been detected, it uses event.preventDefault() to cancel the click event.
The code below on a touchscreen in Chrome, Opera and Android browsers achieves the desired result:
- one alert saying "touch".
However, in Firefox both events are detected, in spite of the preventDefault() in the touchstart handler:
two alerts... first one says "touch", followed by a second alert saying "click".
lginButton.addEventListener('touchstart', function(event) {
event.preventDefault();
alert("touch");
}, false);
lginButton.addEventListener('click', function(event) {
alert("click");
}, false);
Why is this happening and how can I achieve the desired results in all browsers?
I am currently unable to test. But based on your feedback it appears that Firefox is in fact not following the spec on events found here. I was about to find 4-5 bug logs on Mozilla that discussed this very topic, and finally found one that resolved the issue here https://bugzilla.mozilla.org/show_bug.cgi?id=977226. Definitely check to make sure you have the current version of firefox. And if you do it may be worth opening a new bug with mozilla on this. In the meantime you can set up a conditional inside of your touchstart event handler that detects the event type and handles touch and mouse events differently.. And then further adding more conditionals within you click conditional to handle browser and OS version. which is super bad practice, but would keep you going until a patch was implemented.
I want to do Two things...do something when we touch the screen and when we release finger from screen..But touchend function below triggers alert box even before i release my finger.Where i am wrong ?
$(window).on('touchend', function(e){
alert("finger released");
});
$(window).on('touchstart', function(e){
//touch started
});
This is actually a known bug in webkit. Try to use touchmove instead if it suits your needs, or touchcancel is sometimes fired in place of touchend. BTW it works fine on Firefox (on Android at least, I don't even know if FF exists on iOS).
EDIT
What you can do also is playing around with preventDefault(); on the touchstart event, but as it said by it's name, it prevents the default behavior, so once again, it depends on your needs.
I've got a Backbone app, and I'm using Modernizr.
On touch devices, I can't swipe the page to scroll it down, because touch events are triggering Backbone listeners and a series of complex events, rather than the usual page scroll.
This is my code:
events: function () {
if (this.modernizr.touch) {
return {
'touchstart .hover': 'onTouchStart'
};
} else {
return {
'mousemove .hover': 'onMouseMove'
};
}
}
// onTouchStart and onMouseMove both fire a listener
What event should I be using to distinguish swipe from click, so that swipe allows the user to move the page as normal? (I can't easily test on a touch device, just so you know this isn't a lazy question.)
Is your onTouchStart function calling event.preventDefault()? If so, that’ll stop the event triggering the native swipe-to-scroll behaviour. Removing that call should allow users to scroll normally.
This HTML5 Rocks article goes into quite a bit of detail about how touch events propagate/cascade.
Side note: The pattern you’ve used here makes a few dangerous assumptions IMO:
By only binding mouse events if Modernizr.touch is false, users with hybrid devices (touch-capable laptops etc) won’t be able to use the mouse/trackpad; why not just bind both events?
Some browsers/devices can’t fire touchstart or mousemove (keyboard users, Windows smartphones, etc) so won’t be able to use this functionality; if you bind to click events too as a fallback, you’d have them covered
I recently wrote an article about what I consider the “golden pattern” to cover all eventualities, if you’re interested.
Of course if the functionality those handlers provide is non-critical these things might not be a problem.
I have various touchEvents detection on a page on Safari Mobile (a controller, if you want to know...). They all work well indepedantly, but whenever I have a first touchpoint pressed, If I touch a new point, the events are triggered when I trigger a new one.
For example :
I hold the stick with a finger. It's not moving
I press a button, a touchStart event should be triggered but is not
If I move the stick, the touchStart event is triggered
If I let go of the button, the touchStart is triggered, but not the touchEnd
If I move the stick (touchMove), the touchEnd is triggered
You understand how in my case it's a problem. I get buttons triggered with delay, or getting stuck until I move the stick, etc...
Is there a workaround ? thanks