What happened from you touch the screen till iOS app receive the click event? - html

There is a button in the middle of an app. After you touch the screen and click on it, you receive a click event on the button. What happened in the middle?
I used to face a bug, use the UIWebView, one input element in an HTML can't response the click event, but the WkWebview can.
Now I want to confirm the question below:
What happened from you touch the screen till iOS app receive the click event?
After I had viewed the Woodstock's answer. I edit this question.
Don't consider the hardware, just think the iOS system.

There are multiple events triggered, for example:
Finger down, Finger moved, Finger Up.
Additionally there are events for where that occurred, e.g. inside or outside a control.
If you are asking what's happening in the quantum between contact with the capacitive display and the processing of the event by iOS this is not well defined.
Suffice to say, clock cycles and processing :)

Related

Click does not work on iPad when pressed for too long

I have developed a webapp which we usually run on an ipads browser, usually Chrome. There is a problem for a older users when they need to press on a button. They usually press hard and longer than average users, thus the click never gets registered.
The app is an angular app and I've tried to bind a (mousedown) event in hopes of making it fire the event when first touch it. But it seems like that when you hold it down longer on an ipad, it just starts to focus on the text.
Any ideas on how to improve the UX in this case? A lot of older users gets frustrated because to them it does not work.
When you hold your finger on the button you may never reach the mouse events, especially if you move your finger a little. You may check the order of events here https://patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
To handle your issue you may handle either pointerdown or touchstart event.

How to focus Buttons (or other widgets) with TalkBack turned ON in Android Device?

I'm implementing Accessibility in my application. Here's the scenario :
I have 4 buttons arranged horizontally at the very top of the screen (Activity). On the click of a button, I'm launching an Alert Dialog which displays something to the user. With the alert being displayed, I will still be able to perform click operations on those 4 buttons at the top of the screen. When I turn ON TalkBack (Android Accessibility Service) in Android device and click on that button, alert is getting displayed but I'm unable to move the focus (a yellow rectangular box which will be there when TalkBack feature is turned ON in Android phone) to those 4 buttons. Please help!
Try to set the below properties to your buttons
android:importantForAccessibility="yes"
android:focusable="true"
You won't be able to do it with a dialog, you'll need to fake it with a View.
Perhaps you are using the wrong component which is why it sounds odd when you describe it? A picture of your design would help provide some context.
As #aardrian says, the alert dialog is modal and will (and does) block user input from the underlying UI. Clicking away from the dialog or pressing back will dismiss the dialog.
With TalkBack enabled, the user will be able to press the system back button, use the back gesture (swipe down, then left) or select an option within the dialog to dismiss it.
Try to integrate voice control into your application via Accessibility TalkBack
Define 4 buttons, Alert Dialog Box as objects, selected by voice:
button 1
button 2
...
...
I am studying the limitations of voice control of Android smartphone/ device in Blind Mode ( eyes-free)

Reliably detect if a user is using a mouse on a webpage?

On our page we have some iframes in a long horizontally-scrolling <div>. If the user is using a mouse they can scroll with the scrollbars and we would like them to be able to select text within the iframes. If they are using touch only however, the scrollbars are a hassle and I would like to overlay a transparent element over the whole thing to give them the ability to scroll easily by dragging, this of course sacrifices the select-text feature but makes sense in that scenario.
Which gets me to my question, is there a way to reliably detect if a user is interacting with a webpage via a mouse?
Everything I've seen on detecting touch or mouse is that touch will broadcast mouse events so it is very difficult to detect touch OR mouse (not to mention that you can have both). My problem is simpler - it is whether the user has interacted with the page via a mouse.
Can anyone think of a way to check this reliably?
A mouse can do one single thing a touch device can never do - move without having any buttons pressed. So I'd just install an onMouseMove event on page load, and if it triggers without buttons pressed mark the user as a mouse user. You could then persist this through a cookie or LocalStorage since the flag will not change within the same environment, and remove the event right away. The precise way of implementing the single-fire event depends on which library you use (if any at all), but it should be easy with Mootools/JQuery docs in hand.
In general I'd recommend the easier route of just checking for a touch interface in most cases :
if('ontouchstart'in window)
{
/* it's a touch device */
}

Apple Safari Buttons onclick takes to long

i have a simple system to register who is present at a party.
I created an easy numkeypad with buttons, and that works. But when I try it in Safari (or any other mobile browser), it takes about a second before I can press the next button. It has to be quick, so this is too long.
Is there any way to shorten this "waiting" time between button presses.
click events are delayed in mobile browsers due to the fact the browser has to ensure the user isn't double-tapping or tap-holding an element.
I have written a jQuery plugin that can handle touch and mouse events in a convenient way, and allows you to bind one event to trigger without a delay (tap). You can check it out here:
https://github.com/benmajor/jQuery-Mobile-Events

Google Chrome extension button pop-out: How to make it persistent

I have a very simple Chrome extension which produces a bubble pop-out in the top-right of the screen. In the bubble I present the mobile version of our site.
Currently when the extension icon is clicked the bubble pops out and the mobile homepage loads. The user can click around within the bubble and use the mobile site as they wish.
However, once the user clicks outside the bubble is closes. Clicking again repeats the above process.
I wondered if there was a way to make the bubble pop-up/out persistent? So, instead of it disappearing when the user clicks elsewhere it stays loaded until the user clicks the extension icon again. This way the button acts as an on/off switch rather than a single event trigger.
Is this possible, and would someone mind directing me to the code which would help me do this?
As stated in the FAQs, this is not possible. However, chrome.windows.create may meet your needs.