cordova 开发 app 使用 touch 事件替换 click 事件

使用 ul li 做导航条时，由于 click 事件的处理时机要晚于 touchstart ，并且 click 事件能明显使用户感觉到延迟，因此使用 touch 事件代替 click 事件。
由此又带来一个问题：用户滑动导航条时，本意可能是让导航条滚动，但是却触发了导航中某一项的点击事件。下面的代码使用 touchstart 与 touchmove 相结合的方式解决二者的冲突。

var nav = document.querySelector(".nav");

nav.addEventListener("touchstart", function(e){
if(e.target.tagName == "LI"){
    app.navTouchEventTimer = setTimeout(function(){
        // 100毫秒后处理 ul.nav 内部 li 的 touch 事件
    },100);
}
}, false);

nav.addEventListener("touchmove", function(e){
if(app.navTouchEventTimer != false){
    // 在 ul.nav 的 touchmove 事件监听器中取消 li 的 touch 事件
    clearTimeout(app.navTouchEventTimer);
    app.navTouchEventTimer = false;
}
// 处理 ul.nav 的 touchmove 事件
}, false);

频道导航

cordova 开发 app 使用 touch 事件替换 click 事件

您可能感兴趣的文章: