Question

在我的html / js / css应用程序中，在$(document).ready(function)内我有以下代码（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上，正在正确添加悬停类，但它没有被删除。当我使用safari在ipad上调试应用程序并在第$(this).removeClass('button-hover');行放置一个断点时，断点永远不会被触发。

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

不幸的是，该应用程序适用于仅在ipad上使用它的客户端 - 该应用程序是专为内部公司在ipads上使用而设计的 - 所以忽略ipad上的问题不是一个选项。我试图说服客户放弃突出显示 - 他们拒绝并声明在应用程序中使用它是至关重要的。

如果不是ipad上的safari中的一个bug，我无法想到为什么会发生这种情况。任何建议都将不胜感激。

Answer 1

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

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

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

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

仅在ipad上没有触发touchend

1 个答案: