Mobile touch event js jQuery listens for clicks and releases clicks

scene description

When making a mobile page, the ui gives an interactive effect of adding a certain style when clicked, and the style disappears after the click is released.

Solution

Use the on method of jQuery to bind the touchstart event listener to the element. When the touchstart event is triggered, use the addClass method of jQuery to add touch styles to the element. At the same time, bind the touchend event listener to this element, and use the removeClass method of jQuery to remove the touch style.
The specific code is as follows:

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

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