Touchstart:Trigger when the touch starts
touchmove: triggers when the finger slides on the screen
touchend: trigger at end of touch
Each touch event includes three touch lists, each containing a series of touch points (for multi-Touch):
touches: A list of all the fingers that are currently on the screen.
targettouches: The list of fingers that are located on the current DOM element.
changedtouches: A list that involves the finger of the current event.
Each touch point consists of the following touch information (commonly used):
identifier: A numeric value that uniquely identifies the current finger in a touch session. Usually starting from 0 serial number (ANDROID4.1,UC)
Target: The DOM element, which is the target of the action.
Pagex/pagex/clientx/clienty/screenx/screeny: A numeric value where the action occurs on the screen (page contains scrolling distance, the client does not contain scrolling distance, and screen is based on screens).
Radiusx/radiusy/rotationangle: draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse. Initial test browser does not support, fortunately the function is not commonly used, welcome feedback.
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
);
Phone-side HTML5 touchscreen events (touch events)