最新动态新闻

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

烟台网络公司技术问答之手机端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布莱顿和布莱顿区别
江西时时闹剧 3d试机号今天晚上金码号 秒速时时选开奖网 街机海王捕鱼安装 秒速时时网站是多少 36选7开奖中奖规则图 重庆时时哪个网址好 云南时时彩计划团队 浙江十一选五最大遗漏 秒速时时彩破解器 江苏时时组三的几率 北京pk10开奖直播删除 爱彩乐彩票下载 高频彩票概率学 七乐彩胆拖中奖查询 mg电子游戏全讯网