最近项目涉及移动端手势(画div,拖拽、双指缩放、上滑删除等),我用的hammer.js。 参考地址:
http://hammerjs.github.io/
https://www.jianshu/p/0b0b9364f967
想要同时兼容移动端和pc端,实现鼠标(手指)按下并获得坐标,移动,抬起过程。
移动端支持的点击事件:
ontouchstart();
ontouchmove();
ontouchend();
PC端支持的点击事件:
onmousedown();
onmousemove();
onmouseup();
一、以hammer.js 的pan事件为例:
var oBox = document.getElementById('main-cont');
var hammer_windowsDiv = new Hammer(oBox);
hammer_windowsDiv.get('pan').set({enable: true});
hammer_windowsDiv.on("panstart panmove panend", function (ev) {
switch (ev.type) {
case "panstart":
...
break;
case "panmove":
...
break;
case "panend":
...
break;
}
})
二、原生绑定:
var x1, x2, y1, y2; //按下坐标和移动时的坐标
var oBox = document.getElementById('main-cont');
oBox.ontouchstart = oBox.onmousedown = function (e) {
e = e || window.event;
if (e.type == 'touchstart') {//移动端
x1 = e.changedTouches[0].clientX;
y1 = e.changedTouches[0].clientY;
} else if (e.type == 'mousedown') {//pc端
x1 = e.clientX;
y1 = e.clientY;
}
oBox.ontouchmove = oBox.onmousemove = function (e) {
if (e.type == 'touchmove') {//移动端
x2 = e.changedTouches[0].clientX;
y2 = e.changedTouches[0].clientY;
} else if (e.type == 'mousemove') {//pc端
x2 = e.clientX;
y2 = e.clientY;
}
}
oBox.ontouchend = document.onmouseup = function (e) {
...
}
}
三、jquery绑定:
var x1, x2, y1, y2; //按下坐标和移动时的坐标
$('#main-cont').on('touchstart mousedown',function (e) {
e = e || window.event;
if (e.type == 'touchstart') {
x1 = e.originalEvent.changedTouches[0].clientX; //与原生有区别
y1 = e.originalEvent.changedTouches[0].clientY;
} else if (e.type == 'mousedown') {
x1 = e.clientX;
y1 = e.clientY;
}
$('#main-cont').on('touchmove mousemove',function (e) {
if (e.type == 'touchmove') {
x2 = e.originalEvent.changedTouches[0].clientX;
y2 = e.originalEvent.changedTouches[0].clientY;
} else if (e.type == 'mousemove') {
x2 = e.clientX;
y2 = e.clientY;
}
}
$(document).on('touchend mouseup',function (e) {
...
})
})
以上是我实现功能的大概思路,有问题欢迎指正!
更多推荐
移动端、PC端ontouchstart、mousedown等兼容方法(hammer.js/jquery/原生)
发布评论