最新动态新闻

让你轻松掌握天铭网络的第一手信息

烟台网络公司技术问答之手机端html5触屏事件

手机端html5触屏事件touchstart:触摸开始的时候触发touchmove:手指在屏幕上滑动的时候触发touchend:触摸结束的时候触发而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):touches:当前位于屏幕?#31995;?#25152;有手指的列表。targetTouches:位于当前DOM元素上手指的列表。

2017/03/04

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕?#31995;?#25152;有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch?session)中的当前手指。?#35805;?#20026;从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client?#35805;?#21547;滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。


var?obj?=?document.getElementByIdx_x('id');

obj.addEventListener('touchmove',?function(event)?{

?????//?如果这个元素的位置内只有一个手指的话

????if?(event.targetTouches.length?==?1)?{

    ?event.preventDefault();//?阻止浏览器默认事件,重要?

????????var?touch?=?event.targetTouches[0];

????????//?把元素放在手指所在的位置

????????obj.style.left?=?touch.pageX-50? ?'px';

????????obj.style.top?=?touch.pageY-50? ?'px';

????????}

},?false);


JQuery?获取touchstart,touchmove,touchend 坐标

JQuery写法:

?

$('#id').on('touchstart',function(e)?{
	var?_touch?=?e.originalEvent.targetTouches[0];?
	var?_x=?_touch.pageX;
});

$('#id').on('touchmove',function(e)?{
	var?_touch?=?e.originalEvent.targetTouches[0];?
	var?_x=?_touch.pageX;
});

$('#id').on('touchend',function(e)?{
	var?_touch?=?e.originalEvent.changedTouches[0];?
	var?_x=?_touch.pageX;
}


0
分享到:
mk1布莱顿和布莱顿区别
单机斗地主电脑版下载 足球比分360 百灵官网百人牛牛 欢乐二八杠安卓 球探比分直播 三肖包中 澳门新葡新京线上娱乐 快乐时时官方网址 名仕国际棋牌官网 秒速时时开奖 抢庄牛牛技巧图解 如何购买足球竞彩 11选5规律计算公式 百人牛牛天地玄黄技巧 赛车pk10官网开奖记录 加拿大28软件app