HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。touchend事件：当手指从屏幕上离开的时候触发。touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的touch对象的数组。targetTouches：特定于事件目标的Touch对象的数组。changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。每个Touch对象包含的属性如下
clientX：触摸目标在视口中的x坐标。clientY：触摸目标在视口中的y坐标。identifier：标识触摸的唯一ID。pageX：触摸目标在页面中的x坐标。pageY：触摸目标在页面中的y坐标。screenX：触摸目标在屏幕中的x坐标。screenY：触摸目标在屏幕中的y坐标。target：触目的DOM节点目标。例子
function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; } }
}
window.addEventListener('load',load, false); 案例
<template><div><div class="biggestBox"><ul><!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 --><li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index"><!-- "touchstart" 当手指触摸屏幕时候触发 "touchend" 当手指从屏幕上离开的时候触发 "capture" 用于事件捕获--><div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself"><div class="contant"><img class="image" :src="item.imgUrl" alt /><div class="rightBox"><div>{{item.title}}</div><div>{{item.subheading}}</div><div>{{item.faddish}}</div><div>{{item.price}}</div></div></div></div><div class="removeBtn" @click="remove" :data-index="index">删除</div></li></ul></div></div>
</template><script>
export default {name: "index",data() {return {lists: [{title: "标题1",imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",subheading: "副标题1",faddish: "爆款",price: "￥12.00",},{title: "标题2",imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",subheading: "副标题2",faddish: "爆款",price: "￥58.00",},{title: "标题3",imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",subheading: "副标题3",faddish: "爆款",price: "￥99.99",},{title: "标题4",imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",subheading: "副标题4",faddish: "爆款",price: "￥88.32",},{title: "标题5",imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",subheading: "副标题5",faddish: "爆款",price: "￥9999.99",},],startX: 0, //滑动开始endX: 0, //滑动结束};},methods: {// 向左滑动出现删除按钮时，点击商品信息区域取消删除oneself() {if (this.checkSlide()) {this.restSlide();} else {// 点击商品信息弹出弹框alert("hello Word!");}},//滑动开始touchStart(e) {// 记录初始位置this.startX = e.touches[0].clientX;},//滑动结束touchEnd(e) {// 当前滑动的父级元素let parentElement = e.currentTarget.parentElement;// 记录结束位置this.endX = e.changedTouches[0].clientX;// 左滑大于30距离删除出现if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {this.restSlide();parentElement.dataset.type = 1;}// 右滑if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {this.restSlide();parentElement.dataset.type = 0;}this.startX = 0;this.endX = 0;},//判断当前是否有滑块处于滑动状态checkSlide() {let listItems = document.querySelectorAll(".li_vessel");for (let i = 0; i < listItems.length; i++) {if (listItems[i].dataset.type == 1) {return true;}}return false;},//复位滑动状态restSlide() {let listItems = document.querySelectorAll(".li_vessel");// 复位for (let i = 0; i < listItems.length; i++) {listItems[i].dataset.type = 0;}},//删除数据信息remove(e) {// 当前索引值let index = e.currentTarget.dataset.index;// 复位this.restSlide();// 删除数组lists中一个数据this.lists.splice(index, 1);},},
};
</script><style scoped>
.biggestBox {overflow: hidden; /*超出部分隐藏*/
}
ul {/* 消除 ul 默认样式 */list-style: none;padding: 0;margin: 0;
}.li_vessel {/* 全部样式 0.2秒 缓动*/transition: all 0.2s;
}
/* =0隐藏 */
.li_vessel[data-type="0"] {transform: translate3d(0, 0, 0);
}
/* =1显示 */
.li_vessel[data-type="1"] {/* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/transform: translate3d(-164px, 0, 0);
}
/* 删除按钮 */
.li_vessel .removeBtn {width: 664px;height: 403px;background: #ff4949;font-size: 66px;color: #fff;text-align: center;line-height: 403px;position: absolute;top: 0px;right: -64px;border-radius: 2px;
}
/* 左边的图片样式 */
.contant {overflow: hidden; /*消除图片带来的浮动*/padding: 10px;background: #ffffff;
}.contant .image {width: 1300px;height: 1300px;border-radius: 4px;float: left;
}
/* 右边的文字信息样式 */
.rightBox {overflow: hidden;padding-left: 8px;
}
.rightBox div:first-child {font-weight: bold;
}
.rightBox div:nth-child(2) {margin-top: 4px;font-size: 64px;
}
.rightBox div:nth-child(3) {width: 124px;background: rgb(219, 91, 113);color: white;font-size: 62px;text-align: center;padding: 2px 4px 2px 4px;margin-left: auto;
}
.rightBox div:last-child {color: red;font-size: 64px;font-weight: bold;
}
</style>
