JS to realize touch moving touching screen sliding event _javascript skill

Source: Internet
Author: User
Tags abs

Mobile End touch screen sliding effect is actually picture carousel, on the PC page is very good to implement, binding click and MouseOver events to complete. But on the mobile device, to achieve this kind of carousel effect, need to use the core touch event. Handling Touch events can track every finger that slides on the screen.

Here are four kinds of touch events
Touchstart://trigger when the finger is placed on the screen
Touchmove://fingers on the screen sliding trigger
Touchend://trigger when the finger leaves the screen
Touchcancel://The system cancels the touch event when the trigger, this seems to be less use

After each touch event is triggered, an event object is generated, and the event object includes the following three touch lists

Touches://List of all fingers on the current screen
Targettouches://The list of fingers on the current DOM element, try to use this instead touches
Changedtouches://List of fingers that involve the current event, try to use this instead touches
Each touch in these lists is made up of touch objects that contain touching information, and the main properties are as follows:
Clientx/clienty://Touch point relative to the position of the browser window
Pagex/pagey://The position of the touch point relative to the page
Screenx/screeny://The position of the touch point relative to the screen
Identifier: ID of//touch Object
Target://Current DOM element

Attention:

When the finger slides across the screen, it affects the behavior of the browser, such as scrolling and zooming. So when calling a touch event, be aware that scaling and scrolling are prohibited.

1. No scaling
Set through META tags.

2. No scrolling
Preventdefault is to block the default behavior, and the default behavior of touch events is scrolling.
Event.preventdefault ();

Use case:

<! DOCTYPE html>  

The above is the entire contents of this article, I hope you can enjoy.

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.