iOS7 中 jQuery Mobile 滑动事件的不稳定行为

Posted 2023-05-09

【中文标题】iOS7 中 jQuery Mobile 滑动事件的不稳定行为

【英文标题】：Erratic behaviour of jQuery Mobile swipe events in iOS7

【发布时间】：2013-10-10 10:26:58

【问题描述】：

我有一个小脚本，它利用 jQuery Mobile 的 swipeleft 和 swiperight 事件来更改 div 元素中的文本。由于将各种Apple设备升级到ios7，它无法正常运行。

我已经设置了一个简单的小提琴来重现问题，here。

示例 jQuery

$('#container').on('swipeleft swiperight', '.score', function(e) 
    $(this).text( parseInt($(this).text(), 10) + (e.type == 'swipeleft' ? -1 : +1) );
);

示例标记

<div id="container">
    <div class="score">0</div>
    <div class="score">0</div>
</div>

如果您在每个div.score 上多次swipeleft 或swiperight，它就会开始出现异常行为，在事件触发之前会有很大的延迟，有时直到您与屏幕交互才会触发再次（滚动/触摸等）

我很确定这不是特定于我测试过的单个设备，并且在各种设备（2x iPhone 5s'、iPhone 5、iPhone 4、iPad 2nd gen 和 iPad 4th gen )。

这在升级到 iOS7 之前完美运行，我尝试搜索看看是否有其他人遇到过这个问题，或者看看它是否是 iOS7 中 Safari Mobile 的已知错误，但我找不到任何东西。

如果有人能提供解释或可能的解决方案，我将不胜感激。

【问题讨论】：

没错，我刚刚在 iPhone5 iOS 7.0.2 上测试过。可能和 Safari 新更新有关，向右滑动会返回上一页。

我建议不要使用左/右滑动。现代移动浏览器现在将其归因于切换到上一个/下一个选项卡。在 iOS7 和 android Chrome 上测试

我已将水平阈值修改为 20px 而不是 30px（默认），它的性能更好，但当然更敏感。 jsfiddle.net/Palestinian/RgNSJ

【参考方案1】：

使用setTimeout() 似乎可以解决问题：

$('#container').on('swipeleft swiperight', '.score', function(e) 
  var $this = $(this);
  setTimeout(function() 
    $this.text( parseInt($this.text(), 10) + (e.type == 'swipeleft' ? -1 : +1) );
  , 0);
);

Some useful information can be found here

Here's a fiddle