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!
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 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.
I am curious about this one. Does creating a div imitating a button (with 'click' event binded to it) is user-friendly? I mean, does all mobile browsers accurately treat it and always fire event when div is clicked?
Does replacing such constructions with normal buttons increases responsivness on mobile devices?
Google describes this pretty well i think here.
So as described there, handling the click event adds a 300ms delay because it is waiting to see if it is a double-tap.
The technique involves a bit of JavaScript that allows the button to
respond to touchend events rather than click events. Touchend events
are fired with no delay so this is significantly faster than click
events, however there are a few problems to consider:
If the user tapped somewhere else on the screen and then invokes a
touchend on the button then we should not fire a click.
If the user touches down on the button and then drags the screen a bit and then
invokes a touchend on the button then we should not fire a click.
We want to highlight the button when the user touches down to give it a
pressed state.
We can solve the first two problems by monitoring touchstart and touchmove events as well.
We should only consider a touchend on the button if there was previously a touchstart on the button. Also if there exists a touchmove anywhere that goes past a
certain threshold from the touchstart then we should not handle the
touchend as a click.
We can solve the third problem by adding an onclick handler to the
button as well. Doing so will allow the browser to properly treat it
as a button, and our touchend handler will ensure that the button is
still fast. Also, the presence of an onclick handler serves as a good
fallback for browsers that don’t support touch events.
Another advice from experience would be to avoid anchors for buttons.
They recommend using Touchend instead of click.
I've scoured the internet for this answer and been unsuccessful.
Mobile devices are by default slower using the 'click' event because it continues to listen for other types of gestures, such as the double click, scroll, click and hold, etc. Hence, jquery mobile is slow and unresponsive when trying to expand a collapsible list using 'Click'. It delays about .5 second before triggering.
What is the easiest way that I can unbind 'Click' events from these elements and bind the 'tap' event to perform the SAME action?
My plan is to detect if the device is mobile, and if yes, then add the Tap event and thus making the site more responsive.
THANKS!
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