移动端触摸事件 js jQery监听点击及释放点击

场景描述

在做手机端页面时，ui给了一个交互效果是在点击时添加某种样式，点击释放后此样式消失。

解决办法

使用jQuery的on方法给元素绑定touchstart事件监听器，当触发touchstart事件时，使用jQuery的addClass方法给元素添加触摸样式。同时给此元素绑定touchend事件监听器，使用jQuery的removeClass方法来移除触摸样式。
具体代码如下：

// 触摸时添加 
$('.nav-item').on('touchstart', function() {
    $(this).addClass('nav-active')
});

// 释放后移除
$('.nav-item').on('touchend', function() {
    $(this).removeClass('nav-active')
});