【问题标题】:on("click", foo) and on("touchstart", foo) causing strange issues in Android vs iPhoneon("click", foo) 和 on("touchstart", foo) 在 Android 和 iPhone 中引起奇怪的问题
【发布时间】:2015-09-22 14:15:40
【问题描述】:

在下面的脚本中,您会在下面找到“click”和“touchstart”事件。最初是“点击”事件,直到我们发现 iPhone 和 iPad 无法工作,因为它需要“触摸启动”才能工作。

所以,我将它们都包含在内,以便它适用于 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();
        });
    });

【问题讨论】:

  • 您不需要 touchstart 事件。您可以在要单击的元素上使用 css“光标:指针”,它会起作用。这是一个已知的错误

标签: jquery jquery-mobile jquery-on


【解决方案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.orientationundefined,那么它是桌面浏览器,不支持触摸事件。

如果不是,则仅使用触摸事件。你确定在EVENT_CONFIG

【讨论】:

  • 抱歉,方向是确定人们使用哪种设备的一种非常过时的方法。如今,这种方式存在几个问题。而是使用 matchMedia 来检查屏幕尺寸。或者/和 userAgents 可以考虑。组合可能会为不同的设备提供最佳结果。在这种情况下,“点击”事件就足够了。这只是一个 iOS 错误,除非您设置 css cursor:pointer 属性,否则它无法正常工作
猜你喜欢
  • 1970-01-01
  • 2016-08-27
  • 1970-01-01
  • 2017-06-23
  • 2010-12-12
  • 1970-01-01
  • 1970-01-01
  • 2013-01-30
  • 2014-11-14
相关资源
最近更新 更多