首页 > 代码库 > H5中的touch事件
H5中的touch事件
touch中共有touchstart、touchmove和touchend三个事件；
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
并且每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表；
targetTouches：位于当前DOM元素上的手指列表；
changedTouches：涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：
dentifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageY/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
下面是我用几种方法对touch事件的 应用：
第一种方法：
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 oParent = document.getElementById("prog"); var oDiv = document.getElementById("div"); var oDiv1 = document.getElementById("div1") var touch = event.targetTouches[0]; switch (event.type) { case "touchstart": break; case "touchend": break; case "touchmove": event.preventDefault(); var l = touch.clientX-oParent.offsetLeft ; console.log(l) if (l <= 0) { l = 0; } else if (l >= oParent.offsetWidth-oDiv.offsetWidth) { l = oParent.offsetWidth - oDiv.offsetWidth; } var oWidth = (l / oParent.offsetWidth) * 800; oDiv.style.left = l + "px" oDiv1.style.width = oWidth + 25 + "px"; break; } } } window.addEventListener(‘load‘, load, false);
第二种方法：
window.onload=function(){ var btn=document.getElementById("div"); var bg=document.getElementById("div1"); var oP=document.getElementById("prog"); var W=oP.offsetWidth; console.log(W) var ox,ex,endx; btn.addEventListener("touchstart",function(e){ e.preventDefault(); ox=e.touches[0].clientX; startX=btn.offsetLeft+3; //console.log(startX); },false); btn.addEventListener("touchmove",function(e){ e.preventDefault; ex=e.changedTouches[0].clientX; endx=ex-ox+startX; //console.log(endx) if(endx<=0){ endx=0; }else if(endx>=W-btn.offsetWidth){ endx=W-btn.offsetWidth; } var oWidth=(endx/W)*W; console.log(oWidth) btn.style.left=endx+"px"; bg.style.width=oWidth+45+"px"; },false) btn.addEventListener("touchend",function(){ btn.removeEventListener("touchmove"); btn.removeEventListener("tocched"); },false) }
以上就是一些关于对touch的理解。
文章不深，但足以理解touch事件了，赞！！！
摘自：http://www.cnblogs.com/-yhq/archive/2016/01/29/5169871.html
H5中的touch事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。