PhoneGap移动应用程序在滚动时点击选择不正确的项目
我有一个混合移动应用程序，开发了手机差距，并针对iOS设备。 我使用Backbone.js作为我的MVC框架，jQuery，FastClick.js和Hammer.js来处理事件。 我有一个可垂直滚动的项目列表。 如果我点击一个项目，它应该打开细节视图。 如果我在列表不滚动时点击该项目，这工作正常。 但是，如果在列表滚动或减速时点击某个项目，则会选择错误的项目并显示其详细信息。 我看着在滚动列表上点击会产生错误元素的tap事件，用于iPhone / iPad的javascript滚动事件？ 和其他网站建议我听我的滚动列表的onscroll事件。 只要用户滚动列表，就会触发此事件。 我在onscroll的回调中禁用了tap事件。 我在回调中设置了一个定时器，超时时间为300毫秒，然后在该回调中启用300毫秒后执行的点击事件。 如果在定时器触发前我再次获得了一个滚动事件，我会取消先前的定时器并在300ms后再次设置它。 滚动完全停止时没有其他事件被触发。 所以，我只能依靠这个事件。
即使滚动正在减速并且没有完全停止，事件也会触发。 由于这个原因，即使列表正在减速并且没有停止，计时器也会被触发，我又一次遇到了错误的细节选择问题。 当滚动完全停止时，事件再次发生。 如果我将计时器增加到> 300ms，那么在无动量滚动的情况下，点击启用需要更长的时间，用户将继续点击多次。
以下是代码片段：
加载视图时，绑定tap事件和onscroll事件：
that.$('.scrollListItem').hammer().bind('tap',$.proxy(that.showDetail,that));
this.$('#scrollList').bind('scroll',$.proxy(this.checkscroll,this));
checkscroll功能
checkScroll: function(e){
this.$('.scrollListItem').hammer().unbind('tap');
clearTimeout(myGlobalScrollTimer);
var that = this;
myGlobalScrollTimer = setTimeout(function(){
that.$('.scrollListItem').hammer().bind('tap',$.proxy(that.showDetail,that));
},300);
}
即使在滚动列表正在减速并且尚未完全停止的情况下，checkScroll函数当前也正在触发。 如何检测滚动是否完全停止，并且UI不再减速并且仅启用轻击事件？ 有没有其他解决方法？ 请指教。
这个问题是由PhoneGap默认使用UIWebView而不是WKWebView（在ios 8中引入的）造成的。 如果可以的话，切换到使用新的WKWebView。 我认为有插件，如https://github.com/Telerik-Verified-Plugins/WKWebView，可以让你这样做。
WKWebView的好处之一是它具有更好的滚动事件保真度。 事实上，你可能需要去抖动，因为你的应用程序会在UIWebView只发送1到3个滚动事件之前接收数百个数据。
如果你有兴趣，你在滚动期间得到不正确的坐标的原因是UIWebView使用GPU来滚动可滚动区域的位图，所以它不知道准确的坐标。
如果您必须在PhoneGap中使用UIWebView，请考虑使用“click”事件以避免大量令人讨厌的代码来确定滚动是否真的发生。 如果你真的需要fastclick，那么这里有几个技巧来确定是否仍然在进行滚动（这是来自内存，所以数字可能会有点偏离）
touchmove和touchend或touchcancel的x或y的差异来确定速度（并且使用事件的时间戳真的很花哨）。 如果用户滑动以产生高速，更长的滚动，则使用2.5秒的超时（根据您的需要调整）。 如果是低速滚动，请使用300ms。 如果用户只是在拖动，那么它的速度非常低，大约需要50ms。 scroll事件处理程序中，如果上一个滚动事件的时间戳超过1.25秒，则这可能是最后一次滚动事件，因此请使用100ms的超时时间。 如果这是touchend之后的第一个滚动事件，那么使用上面的速度逻辑来确定超时。 touchend / touchcancel ，检查到可滚动区域边缘的距离。 如果它接近，则补偿，因为滚动一旦碰到边缘就会结束并执行弹性视觉效果。 上一篇: Phonegap mobile app tapping while scrolling selects incorrect item