Detailed introduction of html5 mobile phone touch screen touch events

Many new events have been added to HTML5, but because their compatibility issues are not ideal and their practical application is not very strong, they are basically omitted here. We only share events that are widely compatible with good applications. In the future, as the compatibility situation improves More sharing will be added in the future.

The events introduced to you today are mainly touch events:

touchstart: triggered when the touch starts
touchmove: triggered when the finger slides on the screen
touchend: the touch ends Triggered when

And each touch event includes three touch lists, each list contains a corresponding series of touch points (used to implement multi-touch):

touches: A list of all fingers currently on the screen.
targetTouches: A list of fingers located on the current DOM element.
changedTouches: List of fingers involved in the current event.

Each touch point contains the following touch information (commonly used):

identifier: a numerical value that uniquely identifies the current finger in the touch session. Generally a serial number starting from 0 (android4.1, uc)
target: DOM element, which is the target of the action.
pageX/pageX/clientX/clientY/screenX/screenY: a value, the position on the screen where the action occurs (page includes the scrolling distance, client does not include the scrolling distance, and screen is based on the screen).
radiusX/radiusY/rotationAngle: Draw an ellipse roughly equivalent to the shape of a finger, with the two radii and rotation angles of the ellipse respectively. The preliminary test browser does not support it. Fortunately, the function is not commonly used. Feedback is welcome.

The code is as follows:

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);

The above is the detailed content of Detailed introduction of html5 mobile phone touch screen touch events. For more information, please follow other related articles on the PHP Chinese website!