IT源码网

html5的触摸事件讲解

sanshao 2021年02月16日 编程语言 188 0

1.触摸事件有哪些

touchstart,touchmove,touchend

2.分别什么时候触发

  touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

  touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

  touchend事件:当手指从屏幕上离开的时候触发。

3.每个事件中的touch对象如何获得

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

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

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

最好统一使用一个touch对象数组

 

4.如何获得touch对象的相应属性

  clientX:触摸目标在视口中的x坐标。

  clientY:触摸目标在视口中的y坐标。

  identifier:标识触摸的唯一ID。

  pageX:触摸目标在页面中的x坐标。

  pageY:触摸目标在页面中的y坐标。

  screenX:触摸目标在屏幕中的x坐标。

  screenY:触摸目标在屏幕中的y坐标。

  target:触目的DOM节点目标。

 

5.举例子

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); 

  

 

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

h5上传图片讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。