理论记录:
移动端事件流
手指点击一个元素,会经过:touchstart --> touchmove -> touchend --> click。

实践验证:

var content = document.querySelector(".content");
content.addEventListener("touchend", function(){
    content.style.background = "#0F0";
});
content.addEventListener("click", function(){
    content.style.background = "#00F";
});

手机测试一下,点击一下,div是先变成绿色然后又变成蓝色。

那能不能只触发touch事件,不去触发click事件呢?查阅相关资料, 发现了preventDefault()的方法,阻止事件的默认行为。

var content = document.querySelector(".content");
content.addEventListener("touchstart", function(e){
       e.preventDefault();
       content.style.background = "#0F0";
})
content.addEventListener("click", function(e){
        content.style.background = "#00F";
});

通过 preventDefault()方法,可以阻止后面事件的触发。

其他文档链接

链接1

vue自定义指令实现v-tap插件

Vue基础汇总