on("click", foo) 和 on("touchstart", foo) 在 Android 和 iPhone 中导致奇怪的问题

Question

在下面的脚本中，您会发现下面的 "click" 和 "touchstart" 事件。最初它是 "click" 事件，直到我们发现 iPhone 和 iPad 不起作用，因为它需要 "touchstart" 才能起作用。

因此，我将它们都包含在内，以便它适用于 iPhone/iPad。

然后我运行进入 Android 问题，其中 "click" 和 "touchstart" 都被解雇，导致执行 2 次。

那么，对于 iPhone 和 Android，针对此问题的推荐解决方法是什么？

    //Saved Vehicle - Button...
    $(document).on('click touchstart', 'div[id^=RecordViewSheet]', function () {
        var dataVin = $(this).attr("data-vin");
        var dataStockNumber = $(this).attr("data-stock-number");

        ftnThrobblerAnimationBegin3().done(function () {
            httpFormSubmissionPostMethod("InspectionSheet.cshtml", "formStockNumber=" + dataStockNumber + "&formVin=" + dataVin);

            ftnThrobblerAnimationEnd3();
        });
    });

Answer 1

我们在项目中解决类似问题的方式是这样的

function isMobile(){
    if(typeof window.orientation !== 'undefined') return true;
    return false;
}

var EVENT_CONFIG = {
    CLICK: isMobile()?'touchstart':'click'
}

并在您的活动作业中

$(document).on(EVENT_CONFIG.CLICK, 'div[id^=RecordViewSheet]', function () {

关于isMobile函数的解释。

桌面浏览器不支持 orientation 所以我们就是这样检测当前浏览器是桌面浏览器还是移动浏览器的。

如果 window.orientation 是 undefined 则它是桌面浏览器，不支持触摸事件。

如果没有，则仅使用触摸事件。您确定 EVENT_CONFIG

on("click", foo) 和 on("touchstart", foo) 在 Android 和 iPhone 中导致奇怪的问题

on("click", foo) and on("touchstart", foo) causing strange issues in Android vs iPhone

jquery

jquery-mobile

jquery-on