移动端HTML5触摸事件 touch 事件说明 (touchstart、touchmove、touchend、touchcancel)

前言:

最近一同事在项目中遇到一个问题,主要是针对微信公众号的html页面开发,也就是基于微信浏览器开发的网页,当在页面A中点击一个超链接跳转到页面B之后,再点击左上角的返回,则回到了页面A,这是从微信的最右侧开始往左滑动,即可回到页面B,这种基于边缘式的滑动相当于在PC上的返回和前进按钮,于是,在网上找了很多的解决方案,尝试了很多的解决办法,(未得到解决,如有高手欢迎指教),最终我们得出一个结论,当我们从最最右侧滑动页面时,最先触发的并不是页面 document 对象,而是给予了屏幕边缘的某种事件,总之,在这个时候并没有触发页面的东西,所以目前为止暂未得到解决,分享这篇文章主要是在查找解决办法的时候,我们用到了大量的 touch 事件进行判断,而通常情况下,我们在 PC 端进行开发的时候没有办法直接的获取到 touch 事件。所以在这里拿出来分享一下,如下:


  • touchstart : 当手指触摸到屏幕时发生,如果已经有一个手指已经触摸到屏幕也会发生该事件,也就是说如果是多指触控,则会多次触发该事件。
  • touchmove : 当手指在屏幕上滑动的时候会连续出发该事件。
  • touchend : 当手指从屏幕上离开的时候触发该事件。
  • touchcancel :当系统停止跟踪触摸的时候触发。至于这个事件具体是什么时候触发(不好说)!

touchstart、touchmove 这两个方法可以使用 preventDefault() 来禁止,例:

  1. document.addEventListener("touchstart",function(e){
  2. e.preventDefault();//在document上禁止点击事件
  3. })

虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。

  • touches:表示当前跟踪的触摸操作的touch对象的数组。

  • targetTouches:特定于事件目标的Touch对象的数组。

  • changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

  1. clientX:触摸目标在视口中的x坐标。
  2. clientY:触摸目标在视口中的y坐标。
  3. identifier:标识触摸的唯一ID
  4. pageX:触摸目标在页面中的x坐标。
  5. pageY:触摸目标在页面中的y坐标。
  6. screenX:触摸目标在屏幕中的x坐标。
  7. screenY:触摸目标在屏幕中的y坐标。
  8. target:触目的DOM节点目标。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>TOUCH</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7. </head>
  8. <body>
  9. <div id="inp"></div>
  10. <script type="text/javascript">
  11. document.addEventListener("touchstart",touch, false);
  12. document.addEventListener("touchmove",touch, false);
  13. document.addEventListener("touchend",touch, false);
  14. function touch (event){
  15. var event = event || window.event;
  16. var oInp = document.getElementById("inp");
  17. switch(event.type){
  18. case "touchstart":
  19. oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
  20. break;
  21. case "touchend":
  22. oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
  23. break;
  24. case "touchmove":
  25. event.preventDefault();
  26. oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
  27. break;
  28. }
  29. }
  30. </script>
  31. </body>
  32. </html>

评论: