前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定。
目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。
但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。
如何获取手指滑动时的坐标位置呢?
直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好,
如果是jquery的event对象,使用event.originalEvent.changedTouches[0].clientX。
原生:document.querySelector("#aa").addEventListener('touchmove', function(){...});
document.getElementById(
"id"
).addEventListener(
"touchstart"
,
function
(e){
var
_x=e.touches[0].pageX;
var
_y=e.touches[0].pageY;
console.log(
"start"
,_x);
});
document.getElementById(
"id"
).addEventListener(
"touchmove"
,
function
(e){
var
_x=e.touches[0].pageX;
var
_y=e.touches[0].pageY;
console.log(
"move"
,_x);
});
document.getElementById(
"id"
).addEventListener(
"touchend"
,
function
(e){
var
_x=e.changedTouches[0].pageX;
var
_y=e.changedTouches[0].pageY;
console.log(
"end"
,_x);
});
jq: $(".aa").on("touchmove",function (e) {...};
1.获取当前touch位置
$('#webchat_scroller').on('touchstart',function(e) {
var touch = e.originalEvent.targetTouches[0];
var y = touch.pageY;
});
$('#webchat_scroller').on('touchmove',function(e) {
var touch = e.originalEvent.targetTouches[0];
var y = touch.pageY;
});
$('#webchat_scroller').on('touchend',function(e) {
var touch = e.originalEvent.changedTouches[0];
var y = touch.pageY;
});