Actual reference of js touch events, jstouch events

Source: Internet
Author: User

Actual reference of js touch events, jstouch events

At the beginning, JavaScript was used for front-end pages, but it was subsequently attracted by simple and efficient jquery, which has been used until now.

While js is abandoned by my subjective view of the underlying technology.

To work these days, we need to study the touch-screen sliding events on mobile pages and find out the technical support of jquery. (Of course, I may not understand jquery enough ), javascript can be simply defined in a few steps.

I have tried the simplest applications for a long time because I have little knowledge about js ...... Next we will share the actual reference of the js touch event:

$(function(){document.addEventListener("touchmove", _touch, false);})function _touch(event){alert(1);}

The above code inevitably uses jquery, which can be ignored if jquery is not used.

The corresponding events include:

Touchstart: triggered when the finger touches the screen, even if one finger is already on the screen.
Touchmove: triggered continuously when the finger slides on the screen. When this event occurs, call preventDefault () to prevent scrolling.
Touchend: triggered when the finger is removed from the screen.
Touchcancel: triggered when the system stops tracking touch. The exact trigger event of this event is not explicitly described in the document.

The above event objects all have the following attributes:
Touches: an array of Touch objects for the currently tracked Touch operation.
TargetTouches: an array of Touch objects specific to the event target.
ChangeTouches: indicates the array of Touch objects that have changed since the last Touch.

Each Touch object contains the following attributes:
ClientX: Touch the X coordinate of the target in the viewport.
ClientY: Touch the Y coordinate of the target in the viewport.
Identifier: the unique ID of the touch.
PageX: Touch the x coordinate of the target in the page.
PageY: Touch the y coordinate of the target in the page.
ScreenX: Touch the x coordinate of the target in the screen.
ScreenY: Touch the y coordinate of the target in the screen.
Target: DOM node coordinates of the touch

Well, I actually just started learning about it. I should first write down some Baidu attributes.


Why do I need to add return before the onclick event references a function in js? Why not? Why does front-end js continue to be executed in the background?

Generally, events with a return value are intercepted by predefined system events. Compared with custom events with an onclick value, you do not need to remove the return value. However, you must add a return value for intercepted events such as onsubmit. the event is called by the system and the return value must be the same as the predefined return value, for example, return false return 0...

How does js block touch-screen click events? When running to this page, the touch-screen click events on this page are blocked.

1. Override touchstart touchmove and other events so that these events do nothing
Example: document. ontouchstart = funciton () {return false ;};
2. Cancel event bubbling

3. delete your touch screen events.

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.