外贸网站建设公司流程图,二次开发小程序,青岛模板建站代理,北京网站建设报价明细touch对象和touchevent
touch事件 touch对象
每一次发生touch事件时就会产生一个touch对象#xff0c;类似事件处理函数中的事件对象。
div class button classchild styleheight: 400px; width: 400px我是按钮/b…touch对象和touchevent
touch事件 touch对象
每一次发生touch事件时就会产生一个touch对象类似事件处理函数中的事件对象。
div class button classchild styleheight: 400px; width: 400px我是按钮/button
/divscript typetext/javascript//原生js中的touch时间var btn document.querySelector(button);//触摸开始 调用btn.addEventListener(touchstart,function(ev){console.log(js start);})//触摸过程中调用btn.addEventListener(touchmove,function () {console.log(js move);})//触摸结束时调用btn.addEventListener(touchend,function () {console.log(js end);})
/scripttouch和click的区别
touchstart:在这个 dom 上手指触摸开始时即触发。 click:在这个 dom 上手指触摸开始且手指未曾在屏幕上移动且在这个 dom 上手指离开屏幕以及触摸和离开屏幕之间的间隔时间较短才能触发。
touchlist
touchList 接口表示触摸表面上的接触点列表。例如如果用户在触摸表面(例如屏幕或触控板)上有三个手指则对应的 touchList 对象将为每个手指提供一个 touch 对象总共三个条目。
touchList.item()返回列表中指定索引处的 touch 对象。 可以找到指定 touch 对象进行相关的操作
PS注意浏览器兼容性的问题
起点、终点、滑动方向检测
通过 touch 事件进行初始位置以及滑动位置的判断规定对应的移动方向。
起点与终点
起点:当开始一个 touchstart 事件的时候获取此刻手指的横坐标 startX和纵坐标startY 终点:当开始一个 touchend 事件的时候获取此刻手指的横坐标 startX和纵坐标startY。
方向检测 利用初始坐标点与终止坐标点进行对比判断X 与 对比y 与y 对比然后根据结果比较谁移动的最多判断具体方向
PS注意关闭浏览器的默认事件
不要用 alert用 console.logalert 会阻止代码执行。 屏蔽浏览器自有事件
加速度方向的检测
检测设备方向 选择数值 window.orientation 的值为0表示直立90表示设备水平旋转到左边-90表示设备水平旋转到右边。 180表示设备顺时针旋转到底部-180表示设备逆时针旋转到底部。
加速度事件
