We Keep Coding

Tapped really fast cause skipped click event on iOS devices

I am developing an application that needs to detect the touch(or called tap) event precisely and fastly using Vue.
However, I found that for all of my iOS devices, tapping really fast causes missing tap as shown in the gifs that provided below (even wrongly last touch event is triggered for my iPhone 13 mini, no idea why).
CodeSandbox is also provided below and you guys can try it on your own iOS devices.
Anyone have a solution on it? Great Thanks!
CodeSandBox: https://7l45pm.csb.app/
iPhone 13 mini with iOS version 15.1.1
iPhone 12 Pro with iOS version 14.4
P.S.
My android 12 pixel 4a didn’t get this problem
I tested on both Chrome and Safari browser on my iOS devices, both occuring this problem
I tried cursor: pointer css, changed to use native button DOM, ways to eliminate 300ms delay on click events in mobile Safari, but no one get luck.

PinchZoom.js not working on iOS devices after 13.4 update by Apple

So I have run into a problem again with this plugin- PinchZoom.js which started happening after the 13.4 update by Apple for iOS devices.
The problem is that the double tap feature has suddenly stopped working completely on iOS devices now.
For a concrete test, you can refer to the plugin demo page: http://manuelstofer.github.io/pinchzoom/demo/pinchzoom.html
On iOS devices, you won't be able to double tap to zoom in the image whereas this was working fine in previous versions of iOS.
I have even dived down in the source code of the plugin but I am not sure what is causing the double tap TO NOT work in iOS devices after the update.
If anyone has any idea/workaround for this, it would be very helpful.
Thanks

On all browsers there used to be a delay of 300-350ms on touchstart events. Apparently, on iOS there still is. You can test this by logging tap events and time in the touchstart event listener.
And for your issue, you could either solve it by modifying pinchzoom.js to use touchend which has no delay instead of touchstart, or by preventing default behaviour on the touchstart.
I chose the latter and added event.preventDefault() to the touchstart event listener. You can do that too, until the developer provides an official solution.
el.addEventListener('touchstart', function (event) {
event.preventDefault(); //add this
if (target.enabled) {
firstMove = true;
fingers = event.touches.length;
detectDoubleTap(event);
}
});

Sencha Touch 2 pop event issue under IE on Nokia Lumia 630

I have one very unpleasant issue under IE on Lumia.
I'm developing mobile application with Sencha Touch 2 and
use pop event of Main view to attach some logic:
http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.navigation.View-event-pop
Under all browsers the logic is called and application working properly instead
IE on Nokia Lumia 630. The idea is to be executed some logic when
the user click on back button and go to main view. Events attached to
backbutton event not fires at all. A also tried onbeforeunload on
onunload events but there are also not called.
I would be very grateful for any ideas and recommendations on how to solve this problem.

How to handle mouseover and mouseleave events in Windows 8.1 Touchscreen

In my asp.net project, I have written javascript functions on mouseover and mouseleave/ mouseout events of buttons and some other controls. Previously this website was used on non touchscreen devices. But now when I am trying to access the same website on Windows 8.1 , on Internet Explorer 10/11,the problem is, after touching a screen mouse click event is fired (which is ok in my case)and when I remove finger on screen, mouseleave event is fired (which is problematic e.g. dropdowns are not working properly after mouseleave events fired). This Problem arises only in Internet Explorer 10/11. And the site is working fine with all its functionality on Chrome. Is there any JQuery Plugin or some other solution for this problem? Please reply soon. I need this very urgently.
Thanks in advance.

Add aria-haspopup="true" attribute to element triggering dropdown showing/hiding.
https://msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx

jQuery in iPhone

Very simple jQuery doesn't work in Safari for iPhone and iPod touch. I make a simplified case:
$(function(){
$("#boto").click(function() {
$("#boto2").fadeOut("slow");
});
})
http://jsfiddle.net/vWfNj/
http://www.mig-marketing.com/proves2/3.html
It works in computers, it works in iPad but not in my iPod touch. I'm so surprised, I don't understand. Does jQuery needs anything special for Safari in iPhone?

The iphone doesnt have a click event, it has a touch event try this.
$('.class').bind('touchend', function () {
//Code
});
Edit : No idea what your comment means but here....
$(function(){
$("#boto").bind('touchend', function () {
$("#boto2").fadeOut("slow");
});
})

Be aware that on iOS 5, your #boto has to be inserted into the DOM before you attach event handlers to it. I had a similar problem a few days ago : jQuery events on iOS 5

try using .touch instead of .click as a touch event is fired when you click on Any touch supporting device.

I found out that the only problem is with the hosted jQuery library from Google. I don't understand why my iPod touch can download the page but not the jQuery library. I don't know if it is a problem in all iPhones and iPod touch...
Anyway If I download the jQuery library, it works fine. And of course the click function works in the iPhone.