Detect "long press" on touch devices - javascript

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.

Related

Portable way to get Rx stream of all mouse clicks

I wrote React component which listens to few types of js events (click, scroll, keyup). For the first time it seems work's well, but I noticed that on my IPad click events are ignored. I attached my Ipad to Safari remote debugger but haven't found any errors in console.
I think the problem is in the following line.
const windowClickStream = Rx.Observable.fromEvent(window, 'click');
it works in Chrome and Desktop Safary but doesn't work on my Ipad.
My question is:
how to get portable Rx stream of all click events on the web page?
I had a similar problem few months ago and solved this by changing the event listener. The "click" event is at first for desktop applications with a real mouse or touchpad. It takes 300ms until the event is triggered because the browser waits for an additional click to trigger a "dblclick" event. The webkit browser fire an "touchstart" event immediately after you touch the screen.

Triggering action if user canceled touch on mobile device

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

Javascript/JQuery - Controlling the iOS keypad

Based on my previous post where I attempt to fire off an event before the keypad opens on iOS, I am using the "touchstart" option to fire off an event.
Fire Event before 'focus' kicks in / Fire Event before keyboard appears on iOS
This works great, but when the device is slightly delayed the touchstart doesn't fire quick enough before the blur so the keyboard appears before the code is fired which is a major issue (we are working around the position: fixed;) issue.
My question is this:
Is there any way to control the keypad? Adding a timer or anything (even a code break) on the touchstart doesn't stop the keypad appearing on blur (when the touch is removed).
Thank you!

Simulating touchstart and touchend events?

I'm developing a jquery component which works primarily for ipad. So is there anyway to simulate 'touchstart and 'touchend' events in desktop rather than having the device itself to check the events.
You can author your own custom events within jQuery:
var event = $.Event( "touchstart", { pageX:200, pageY:200 } );
And you can issue them against any element in the DOM:
$("body").trigger( event );
Demo: http://jsbin.com/ezoxed/edit#javascript,html
Further reading: http://api.jquery.com/category/events/event-object/
Keep in mind that there are various other types of interfaces on the market now that don't support touchstart and touchend events. For instance, Windows 8 is already occupying tablets in the mobile market, and it uses a more abstracted event model consisting of Pointers.
Chrome Dev-tools within a Chrome Browser allows you to emulate touch events. See https://developers.google.com/chrome-developer-tools/docs/mobile-emulation.
From the docs...
Emulating Touch Events
Touch is an input method that's difficult to test on the desktop,
since most desktops don't have touch input. Having to test on mobile
can lengthen your development cycle, since every change you make needs
to be pushed out to a server and then loaded on the device.
A solution to this problem is to simulate touch events on your
development machine. For single-touches, the Chrome DevTools supports
single touch event emulation to make it easier to debug mobile
applications on the desktop.
To use from a Chrome browser (as of version 29.0.1547.65):
Select the Chrome menu at the top-right of your browser window (three stacked lines).
Select Tools > Developer tools. (Shortcut Shift+Control+I)
A tools window will appear on the bottom with the tab Console selected.
In the bottom right click on the settings cog (look like a gear).
A setting panel will appear with "General" on top.
Click "Overrides" on left to select overrides panel.
Scroll down and check "Enable touch events"
Reload your page
You mouse will now appear as a fuzzy circle. Click to "touch".
As of 2018, Chrome DevTools supports device emulation outright, without any need for override setting. Just toggle the device toolbar (Ctrl + Shift + M) to get the browser into mobile mode, then touch events can be triggered by the mouse.

How to detect mouse click and hold in Android browser?

I am writing a webpage that is intended to be viewed on Android phones and hopefully other mobile devices. I am going with a webpage as opposed to an App because it is more platform independent.
I would like to perform an operation continuously while the uses is clicking and holding a button on the webpage. On mobile device the operation would run continuously when they hold their finger on the button on the webpage.
I have tried using the javascript function setInterval() on the onmousedown event of my input button and clearInterval() on the onmouseup event. This works perfectly when accessing the device from any browser on a PC. Unfortunately, it doesn't work on my Android phone. The button appearance does seem to change to the held state when pressed and held but the onmousedown event doesn't get called.
Has anyone found a good way to do press-and-hold button actions that is compatible with Android devices?
Check here:
What DOM events are available to WebKit on Android?
and here:
Quirksmode.org/mobile
Seems that you need to use some of the DOM or touch handlers (last one may have problems when using trackbal)

Categories

Resources