移动端开发之touch事件

责编:menVScode 2017-09-04 23:14 阅读(368)

touch事件

        touchstart:手指触碰;touchmove:手指移动;touchend 手指抬起。在模拟器下,不支持用on 的方式来给元素加touch事件,在真机没有问题。通常在开发中建议用addEventListener去给元素添加事件。

box.ontouchstart = function(){ //不建议使用,模拟器上无效
	console.log(0);
}
box.addEventListener('touchstart', function(e) {
	console.log(1);
});
box.addEventListener('touchmove', function(e) {
	console.log(2);
});
box.addEventListener('touchend', function(e) {
	console.log(3);
});

        touch事件和mouse事件的区别:

touchstart 手指触碰 -- mousedown

touchmove 手指移动 -- mousemove

touchend 手指抬起 -- mouseup

touchstart 手指触碰元素

touchmove 手指触碰元素之后,在屏幕中进行移动

touchend 手指触碰元素之后,在屏幕中抬起

        mouse事件:鼠标没有点击并移动也会执行mousemove事件,按下box区域执行mousedown事件,移动执行mouse move事件,移除box区域mousemove事件就不执行了。

box.addEventListener('mousedown', function(e) {
	console.log(1);
});
box.addEventListener('mousemove', function(e) {
	console.log(2);
});
box.addEventListener('mouseup', function(e) {
	console.log(3);
});

        移动端同样也支持 mouse事件,但是mouse事件 在移动端的执行会有300ms左右的一个延迟。


标签: touch事件
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码