touchstart,touchmove,touchend事件 写法

Posted 2020-08-09

jQuery写法：

 1 $(‘#id‘).on(‘touchstart‘,function(e) {
 2     var _touch = e.originalEvent.targetTouches[0]; 
 3     var _x= _touch.pageX;
 4 });
 5 
 6 $(‘#id‘).on(‘touchmove‘,function(e) {
 7     var _touch = e.originalEvent.targetTouches[0]; 
 8     var _x= _touch.pageX;
 9 });
10 
11 $(‘#id‘).on(‘touchend‘,function(e) {
12     var _touch = e.originalEvent.changedTouches[0]; 
13     var _x= _touch.pageX;
14 }

 

原生写法：

 1 document.getElementById("id").addEventListener("touchstart",function(e)
 2 {
 3     var _x=e.touches[0].pageX;
 4     var _y=e.touches[0].pageY;
 5     console.log("start",_x)
 6 })
 7 document.getElementById("id").addEventListener("touchmove",function(e)
 8 {
 9     var _x=e.touches[0].pageX;
10     var _y=e.touches[0].pageY;
11     console.log("move",_x)
12 })
13 document.getElementById("id").addEventListener("touchend",function(e)
14 {
15     var _x=e.changedTouches[0].pageX;
16     var _y=e.changedTouches[0].pageY;
17     console.log("end",_x)
18 })