移动端常用事件类型

touchstart: 手指触摸屏幕
touchmove:  手指在屏幕上移动
touchend:   手指移出屏幕
touchcancel:  当系统停止跟踪触摸时触发

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <button id="mybtn">点击我</button>
</body>
</html>

 var key={
        addEvent:function(element,type,fun){
            if(element.addEventListener){
                element.addEventListener(type,fun)
            }else if(element.attachEvent){
                element.attachEvent("on"+type,fun)
            }else{
                element["on"+type]=null
            }
        },
        removeEvent:function(element,type,fun){
            if(element.addEventListener){
                element.removeEventListener(type,fun)
            }else if(element.attachEvent){
                element.detachEvent("on"+type,fun)
            }else{
                element["on"+type]=null
            }
        }
    }
    var btn=document.getElementById("mybtn")
    key.addEvent(btn,"touchstart",function(event){
        console.log("当前触摸屏幕的触摸点数组："+event.touches)
        console.log("数组中只包含引起事件的触摸点信息："+event.changedTouches)
        console.log("只包含放在元素上的触摸信息："+event.targetTouches)
        console.log(111)
    })
    key.addEvent(btn,"touchmove",function(event){
        console.log(222)
    })
    key.addEvent(btn,"touchend",function(event){
        console.log(333)
    })

Q_King_

发布了25 篇原创文章 · 获赞 0 · 访问量 633

私信关注

移动端常用事件类型

猜你喜欢