Phone-side HTML5 touchscreen events (touch events)

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.