最新动态新闻

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

烟台网络公司技术问答之手机端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
分享到:
2019赫罗纳√西班牙人
时时彩计划网 信汇在线黑钱吗 21点扑克手机游戏 好运来时时彩计划 抢庄牛牛技巧图解 彩票256官方地址 重庆时时彩5位精准预测 新火娱乐 家彩开奖首页 新疆时时开奖号码公平吗 时时彩人工计划 新时时 365英超体育投注 正宗中国麻将 江苏快三免费计划软件 牌九玩法图解