html touch事件,移动端touch事件和click事件的区别
HTML5中加入了很多新的事件，但由于其兼容性问题并不理想，实际应用性也不是太强，所以这里基本省略。先只分享应用广泛且兼容的事件，以后随着兼容性的提高再陆续补充分享。今天给大家介绍的事件主要是触摸事件：touchstart、touchmove、touchend。
起初，触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器新增的向开发者传达一些信息的事件。因为iOs设备既没有鼠标也没有键盘，所以在为手机Safari浏览器开发交互式网页时，PC上的鼠标和键盘事件是不够的。
iPhone 3Gs发布时，其自带的手机Safari浏览器提供了一些与触控操作相关的新事件。随后，Android上的浏览器也实现了同样的事件。当用户的手指放在屏幕上、在屏幕上滑动或离开屏幕时，触摸事件将开始。以下详细信息：
触摸事件：当手指触摸屏幕时触发，即使手指已经放在屏幕上。Touchmove事件：手指在屏幕上滑动时连续触发。在此事件期间，调用preventDefault()事件可以阻止滚动。Toud事件：当手指离开屏幕时触发。Touchcancel事件：当系统停止跟踪触摸时触发。文件中没有规定这次活动的确切出发时间，所以我们只能猜测。以上事件都会冒泡，可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们是以一种DOM兼容的方式实现的。所以每个触摸事件的事件对象都提供了鼠标实践中常见的属性：bubbles(bubble事件的类型)、canable(是否可以使用preventDefault()方法取消与事件关联的默认动作)、clientX(事件触发时返回鼠标指针的横坐标)、clientY(事件触发时返回鼠标指针的纵坐标)、screenX(事件触发时鼠标指针的横坐标)和screenY(事件触发时返回鼠标指针的纵坐标)。除了常见的DOM属性，触摸事件还包含以下三个用于跟踪触摸的属性。
Chess:表示当前跟踪的触摸操作的触摸对象数组。TargetTouches:特定于事件目标的触摸对象数组。ChangeTouches:一个Touch对象数组，表示自上次触摸以来发生了什么变化。每个触摸对象包含以下属性。
ClientX:触摸视口中目标的X坐标。ClientY:在视口中触摸目标的Y坐标。标识符：标识触摸的唯一ID。PageX:页面中触摸目标的x坐标。PageY:页面中触摸目标的y坐标。ScreenX:触摸屏幕上目标的x坐标。ScreenY:触摸目标在屏幕上的y坐标。目标：一个醒目的DOM节点目标。以上属性果然如此复杂，每个属性又如此细致。只有真刀真枪的小例子才能更好的理解其中的玄机。所以一个小例子如下。
函数load(){ document。addevent侦听器( touch start ，touch，false)；文档。addevent侦听器( touch move ，touch，false)；文档。addevent侦听器( touch end ，touch，false)；函数触摸(事件){ var event=event window。事件；var oInp=文档。getelementbyid( InP )；开关(事件。type){ case Touch start :oinp。innerhtml=“Touch started(”事件。触摸[0]).clientX ， event.touches[0].clientY ")"；打破；案例‘触底’:oinp。innerhtml= br touch end(事件。已更改触摸[0].clientX ， event.changedTouches[0].clientY ")"；打破；案例“触摸移动”:事件。防止默认()；oinp。innerhtml= br touch moved(事件。触摸[0]).clientX ， event.touches[0].clientY ")"；打破；} } }窗口。addevent侦听器( load ，load，false)；对上面的代码稍微做点改动，可以判断水平方向滑动的方向，然后左相应的动作，如下：
函数load(){ document。addevent侦听器( touch start ，touch，false)；文档。addevent侦听器( touch move ，touch，false)；文档。addevent侦听器( touch end ，touch，false)；函数触摸(事件){ var event=event window。事件；var oInp=文档。getelementbyid( InP )；变量距离，clientX_start，clientX_end，minRange=10this.clientX _ start这个方向；这个。回调fun=function(){ if(this。direction== ltr ){ console。日志(从左往右);} else { console.log(从右往左);} }开关(事件。type){ case touch start :clientX _ start=event。触摸[0].clientXthis。clientX _ start=clientX _ start打破；案例“touchend”:这个。回调fun()；打破；案例“触摸移动”:事件。防止默认()；clientX _ end=event。已更改触摸[0].clientX//判断移动的方向距离=clientX _ end-this。clientX _ start如果(这个。clientx _ start minRangeclientX _ end){ this。direction= ltr} else if(这个。clientx _ start-minRangeclientX _ end){ this。方向=‘RTL’；}破；} } }窗口。addevent侦听器( load ，load，false)；到此这篇关于HTML5触摸事件（触摸开始、触摸移动和触摸端)的实现的文章就介绍到这了，更多相关HTML5触摸事件内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。