仅在iPad上不触发touchend [英] touchend not triggered on ipad only

问题描述

在我的html/js/css应用中，在$(document).ready(function)内部，我有以下代码(复制粘贴，逐字记录):

In my html/js/css app, inside $(document).ready(function) I have the following code (copy-paste, verbatim):

$(document).on('mousedown touchstart', '.button', function() {
    if(!$(this).hasClass('button-disabled')) {
        $(this).addClass('button-hover');
    }
}).on('mouseup touchend', '.button', function() {
    $(this).removeClass('button-hover');
});

该想法是突出显示mousedown或touchstart上的按钮，并删除mouseup和touchend上的突出显示.在所有浏览器的桌面(osx，linux和Windows)上，这都可以正常工作.这在Android(触摸屏)和iPhone 5S(我只有这种型号)上也能很好地工作.但是，在iPad上，鼠标悬停类已正确添加，但尚未删除.当我使用野生动物园在ipad上调试应用程序并将断点放在行$(this).removeClass('button-hover');上时，永远不会触发该断点.

The idea is to highlight buttons on mousedown or touchstart and remove the highlight on mouseup and touchend. This works perfectly fine on desktop (osx, linux and windows) in all browsers. This also works perfectly fine on Android (touch screen) and on iPhone 5S (I only have this model). However on iPad, the hover class is being added correctly, yet it's not being removed. When I debug the app on ipad using safari and put a breakpoint on line $(this).removeClass('button-hover'); that breakpoint is never triggered.

将事件分别分配给每个按钮不是一种选择，因为实际上在应用程序中有数百个位置，这些按钮是在应用程序运行时动态创建和销毁的.

Assigning events to each button individually is not an option, as there are literally hundreds of places in the app wherebuttons are created and destroyed dynamically as the app is running.

不幸的是，该应用程序仅适用于仅在ipad上使用它的客户端-该应用程序是专为内部公司在ipads上使用而设计的-因此，忽略ipad上的问题不是一种选择.我试图说服客户放弃突出显示-他们拒绝了，并说在应用程序中添加它至关重要.

Unfortunately, the app is for a client that only uses it on an ipad - the app is explicitly designed for internal company use on ipads - so ignoring an issue on ipad isn't an option. I tried to convince the client to forgo the highlighting - they refused and stated that it's critical to have it in the app.

这简直是ipad上的Safari浏览器中的一个错误，我想不出发生这种情况的任何原因.任何建议将不胜感激.

Short of a it being a bug in safari on ipad, I can't think of any reason why this would be happening. Any suggestions would be greatly appreciated.

推荐答案

好的，这并不是严格的错误，而是ipad上的Safari和其他浏览器/平台在行为上的区别.

Ok, this wasn't strictly a bug, but rather a difference in behaviour between safari on ipad and other browsers/platforms.

在应用的另一个地方，我有

In another place in the app, I had

$(document).on('mouseup touchend', '.button', function(e) {
    ... //some other code
    e.stopPropagation();
    e.preventDefault();
});

我猜想Safari浏览器首先执行了此处理程序，并且事件中的stopPropagation或preventDefault导致其未执行链中的下一个处理程序.令我惊讶的是，这只影响了iPad上的Safari浏览器，甚至在iPhone上，一切都正常运行.

I am guessing safari was executing this handler first and either stopPropagation or preventDefault on the event was causing it to not execute the next one in the chain. I am surprised that this only affected safari on ipad and even on iphone everything worked correctly.

这篇关于仅在iPad上不触发touchend的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！