touchend 仅在 ipad 上不触发

Posted 2023-03-14

【中文标题】touchend 仅在 ipad 上不触发

【英文标题】：touchend not triggered on ipad only

【发布时间】：2016-01-12 22:18:57

【问题描述】：

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

$(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 上，悬停类被正确添加，但没有被删除。当我使用 safari 在 ipad 上调试应用程序并在 $(this).removeClass('button-hover'); 行上放置一个断点时，该断点永远不会触发。

单独为每个按钮分配事件不是一种选择，因为在应用程序中实际上有数百个地方在应用程序运行时动态创建和销毁按钮。

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

这不是 ipad 上 safari 中的一个错误，我想不出任何原因会发生这种情况。任何建议将不胜感激。

【问题讨论】：

事件的开始是由 mousedown 还是 touchstart 触发的？你试过gesturestart/gestureend吗？

@GeorgeHoupis 是的，开始被正确触发。不过没关系，我发现了问题。

【参考方案1】：

好的，这并不是严格意义上的错误，而是 ipad 和其他浏览器/平台上的 safari 之间的行为差​​异。

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

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

我猜 safari 是首先执行这个处理程序，而事件的stopPropagation 或preventDefault 导致它不执行链中的下一个处理程序。令我惊讶的是，这只影响了 ipad 上的 safari，甚至在 iphone 上一切正常。