HTML5真正解析的触摸事件(touchstart,touchmove,和touchend)
HTML5添加了许多新的事件,但由于其兼容性不是很理想,实际应用不太强,所以在这里我们只分享不应用广泛兼容的事件之后的几天,兼容性好,升级逐渐增加份额后,介绍了今天的活动主要是触摸事件:touchstart,touchmove和touchend。最初的触摸事件touchstart,touchmove,和touchend是iOS Safari浏览器的一些新的信息传达给开发商。因为iOS设备没有鼠标和键盘,因此不足以使用PC的鼠标和键盘事件,当开发移动Safari浏览器交互的Web页。
当iPhone 3GS发布自己的移动Safari浏览器提供的触摸相关的一些新的项目(触摸)操作。然后,同样的事件是由Android的浏览器实现。触摸事件(触摸)开始,当用户的手指放在屏幕上,在屏幕上滑动,或从屏幕。以下详情如下:
touchstart事件:当手指触摸屏幕时,它会触发即使一个手指放在屏幕上。
touchmove事件:连续触发时触发手指滑动屏幕上。在这种情况下,调用preventDefault()事件可以防止滚动。
touchend事件:触发时,手指离开屏幕。
touchcancel事件触发时,系统停止跟踪联系。事件的确切发车时间是文档中没有指定,所以我们只能猜测。
上述事件冒泡,可以取消。虽然这些触摸事件不在DOM规范中定义的,他们是在一个DOM兼容的方式实现的。因此,每一个触摸事件的事件对象提供了实践中常见的属性:鼠标(型发泡泡沫事件)与可撤销(preventDefault方法(是否)可以取消与事件关联的默认行为)、ClientX(当事件被触发时,鼠标指针坐标,clienty(水平)返回的事件触发时,鼠标指针(用ScreenX)垂直坐标,当一个事件被触发时,鼠标指针水平坐标)和Screeny(当一个事件被触发时,鼠标指针坐标)。此外To常见的DOM属性,触摸事件包括以下三个跟踪触摸的属性。
触摸:一系列触摸对象,用于当前正在跟踪的触摸操作。
TargetTouches:触摸的对象,具体到事件目标数组。
ChangeTouches:那已经过去了触摸触摸对象数组。
每个触摸对象包含的属性如下所示。
ClientX:X坐标碰在视图的目标。
ClientY:Y坐标触摸在视图的目标。
标识符:标识触摸的惟一id。
PageX:在页面目标点的X坐标。
PageY:点页面中的目标Y坐标。
用ScreenX:触摸屏幕中目标的X坐标。
ScreenY:触摸屏幕中目标的Y坐标。
目标DOM:目标节点类。
上述属性非常复杂。每个属性都很详细。只有一个真正的刀和实心枪的小例子可以更好地理解它的秘密。
Javascript代码
复制代码代码如下:函数加载(){
Document.addEventListener('touchstart,触摸,假);
Document.addEventListener('touchmove,触摸,假);
Document.addEventListener('touchend,触摸,假);
函数触摸(事件){
var =事件| | window.event事件;
var = document.getelementbyid欧洲小捆状过量发行的报纸(输入);
开关(事件类型){
案例touchstart :
oinp.innerhtml =触摸开始(+事件。触动{ 0 }。ClientX +
打破;
案例touchend :
OInp.innerHTML = Touch end ( + event.changedTouches{0}.clientX +
打破;
案例touchmove :
Event.preventDefault();
oinp.innerhtml =触摸移动(+事件。触动{ 0 }。ClientX +
打破;
}
}
}
Window.addEventListener(载荷、载荷、假);
HTML代码
复制代码代码如下所示:
一个小例子。当touchstart事件触发,触摸的位置更新到DIV标签。当touchmove事件被触发时,它会默认滚动行为(触摸运动的默认动作是滚动页面),然后更改触摸操作信息的DIV标签的touchend事件。将输出的触摸操作的最后信息。注意当touchend事件触发,没有触摸的物体在接触收集因为没有主动触摸操作。
这些事件被触发在文档的所有元素上,因此页面的不同部分可以单独操作:
(1)touchstart
(2)鼠标悬停
(3)MouseMove(一)
(4)鼠标
(5)松开鼠标
(6)单击
(7)touchend
介绍了这么多,这些事件触摸兼容什么支持触摸事件(touchstart,touchmove和touchend)浏览器:iOS版Safari、Android版本的WebKit,bada版本道芬,OS6 +黑莓Webkit,Opera移动10.1 +和LG OS专有的幻影浏览器。目前只有iOS版Safari支持多点触摸的。Firefox 6 +铬PC版还支持触摸事件。
HTML5着陆事件(touchstart,touchmove和touchend)已经被介绍给你。今天我们主要介绍一些浏览器兼容的情况和精彩的触摸事件,希望能给大家一个参考,希望大家多多支持。