This article mainly introduces the touch events of HTML5 actual combat and analysis. The introduction is more detailed, and friends who need it can refer to it.
A lot of new events have been added in HTML5, but because their compatibility issues are not ideal and the application is not very practical, they are basically omitted here. We only share the events that are widely compatible with good applications, and will continue to follow as the compatibility situation improves in the future. Add share. The events introduced today are mainly touch events: touchstart, touchmove and touchend.
Initially, the touch events touchstart, touchmove and touchend are newly added events in Safari for iOs to convey some information to developers. Because iOs devices have neither a mouse nor a keyboard, mouse and keyboard events on the PC side are not sufficient when developing interactive web pages for mobile Safari browsers.
When the iPhone 3Gs was released, its own mobile Safari browser provided some new events related to touch operations. Subsequently, the browser on Android also implements the same event. Touch events are triggered when the user's finger is placed on the screen, swiped on the screen, or removed from the screen. The specific instructions are as follows:
touchstart event: Triggered when a finger touches the screen, even if a finger is already on the screen.
touchmove event: fired continuously when the finger slides on the screen. Calling the preventDefault() event during this event prevents scrolling.
touchend event: Triggered when the finger leaves the screen.
touchcancel event: Fired when the system stops tracking touches. The exact departure time of this event is not specified in the document, we can only guess.
All of the above events will bubble up and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a DOM-compatible way. Therefore, the event object of each touch event provides properties that are common in mouse practice: bubbles (type of bubble event), cancelable (whether the default action associated with the event can be canceled with the preventDefault() method), clientX (return When the event is triggered, the horizontal coordinate of the mouse pointer), clientY (returns the vertical coordinate of the mouse pointer when the event is triggered), screenX (when an event is triggered, the horizontal coordinate of the mouse pointer) and screenY (returns the mouse pointer when an event is triggered) The vertical coordinate of the mouse pointer when the event was fired). In addition to common DOM properties, touch events contain the following three properties for tracking touches.
touches: An array of touch objects representing the currently tracked touch operations.
targetTouches: An array of Touch objects specific to the event target.
changeTouches: An array of Touch objects representing what has changed since the last touch.
The properties contained in each Touch object are as follows.
clientX: The x coordinate of the touch target in the viewport.
clientY: The y coordinate of the touch target in the viewport.
identifier: Unique ID that identifies the touch.
pageX: The x coordinate of the touch target in the page.
pageY: The y coordinate of the touch target in the page.
screenX: The x coordinate of the touch target on the screen.
screenY: The y coordinate of the touch target in the screen.
target: The target of the target DOM node.
Looking at the above attributes in this way, it is really very complicated. Each attribute is so detailed. Only a small example of real swords and guns can better understand the mystery. So the small example is as follows.
JavaScript code function load (){
document.addEventListener('touchstart',touch,false);
document.addEventListener('touchmove',touch,false);
document.addEventListener('touchend',touch,false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML ="Touch started (" event.touches[0].clientX "," event.touches[0].clientY ")";
break;
case "touchend":
oInp.innerHTML ="
Touch end (" event.changedTouches[0].clientX "," event.changedTouches[0].clientY ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML ="
Touch moved (" event.touches[0].clientX "," event.touches[0].clientY ")";
break;
}
}
}
window.addEventListener('load',load,false);
HTML代码
上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到p标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到p标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。
这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
介绍了这么多，这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6 中的BlackBerry WebKit、Opera Mobile 10.1 和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6 和Chrome也支持触摸事件。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注jquery中文网