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>
js
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)
})