javascript:touch事件
2017-05-30 21:34
387 查看
今天
很闲,所以整理了下笔记,写写touch事件,很是简单,直接上代码:
document.getElementById("divtest").addEventListener("touchstart", function(eventstart) {
var startevent = eventstart;
var touch1 = startevent.targetTouches[0];
domywork();
allx[0] = touch1.pageX;
startevent.stopPropagation();
});
document.getElementById("divtest").addEventListener("touchmove", function(eventmove) {
var moveevent = eventmove;
var touch2 = moveevent.targetTouches[0];
allx[2] = allx[0];
allx[3] = touch2.pageX;
move(allx[2], allx[3])
allx[2] = allx[3];
});
document.getElementById("divtest").addEventListener('touchend', function(endevent) {
allx[1] = endevent.changedTouches[0].pageX;
chaneswork();
doyourwork();
}, false);
通常,我们要操作touch事件,基本有三部,一是按下去
二是移动
三是抬起来
分别对应上面的三个事件,还有一个是取消,但是不太懂用处,他是因对突发事件设置的,比如手机在你触发touch事件的时候,应用突然闪退了,这时候就触发了,
在三个事件中,我们看到了这么一句话:
var touch2 = moveevent.targetTouches[0];
这是我们对应的操作事件,0代表什么》?代表的是第一个触摸点,(手机支持多点触碰)
这里只靠滤一个触碰点的情况下,在这个时候,我们可以去获取我们要的东西,比如点击力度,位置之类的
然后经行我们的操作,没错,就是这么简单,但是要注意兼容性,(所以很多情况下我们使用插件)
在jquery mobile中,这部分封装的很好,大家可以看看
很闲,所以整理了下笔记,写写touch事件,很是简单,直接上代码:
document.getElementById("divtest").addEventListener("touchstart", function(eventstart) {
var startevent = eventstart;
var touch1 = startevent.targetTouches[0];
domywork();
allx[0] = touch1.pageX;
startevent.stopPropagation();
});
document.getElementById("divtest").addEventListener("touchmove", function(eventmove) {
var moveevent = eventmove;
var touch2 = moveevent.targetTouches[0];
allx[2] = allx[0];
allx[3] = touch2.pageX;
move(allx[2], allx[3])
allx[2] = allx[3];
});
document.getElementById("divtest").addEventListener('touchend', function(endevent) {
allx[1] = endevent.changedTouches[0].pageX;
chaneswork();
doyourwork();
}, false);
通常,我们要操作touch事件,基本有三部,一是按下去
二是移动
三是抬起来
分别对应上面的三个事件,还有一个是取消,但是不太懂用处,他是因对突发事件设置的,比如手机在你触发touch事件的时候,应用突然闪退了,这时候就触发了,
在三个事件中,我们看到了这么一句话:
var touch2 = moveevent.targetTouches[0];
这是我们对应的操作事件,0代表什么》?代表的是第一个触摸点,(手机支持多点触碰)
这里只靠滤一个触碰点的情况下,在这个时候,我们可以去获取我们要的东西,比如点击力度,位置之类的
然后经行我们的操作,没错,就是这么简单,但是要注意兼容性,(所以很多情况下我们使用插件)
在jquery mobile中,这部分封装的很好,大家可以看看
相关文章推荐
- 【转】javascript——touch事件(转)
- html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
- html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
- javascript的Touch事件
- javascript移动设备Web开发中对touch事件的封装实例
- 基于JavaScript touch事件的自定义按钮示例
- javascript移动设备Web开发中对touch事件的封装实例
- javascript——touch事件介绍与实例演示
- JavaScript笔记(touch事件)
- javascript——touch事件
- javascript——touch事件
- javascript touch事件
- 浅谈javascript的Touch事件
- [转]html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
- javascript touch事件
- javascript中的touchstart事件,求写法
- javascript移动设备Web开发中对touch事件的封装实例
- JavaScript中的Touch事件简介