js-Touch events, gesture events

js-Touch events, gesture events

• • Dbclick
    Touch-screen devices do not support double-click events. Double-clicking the browser window will enlarge the screen.
    You can do this by adding a line to the head tag:

      name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    Can be implemented, the page we write does not zoom in and out as the gesture is used.
    metaI have not studied the label, sin.
  • Mouse
    On the touchscreen, we click on an element that will trigger accordingly: mousemove mousedown mouseup click So when we write the mobile client interface, we can add the move event directly to the element to improve efficiency.
    Also triggered mouseover with mouseout , test results, I found that only when the page first refreshes, click on the element, the attendees trigger the MouseOver event.

  With the penetration of mobile devices, the touchevent has begun to develop specifications.

  • Touch events
    This type of event is triggered when the user's finger is on the screen, when it is sliding on the screen, or when it is moved away from the screen. Specifically, there are several touch events.
    • Touchstart
      Triggers when the finger is placed on the screen.
    • Touchmove
      Triggers continuously when the finger is sliding on the screen.
    • Touchend
      Triggered when the finger is left on the screen.
    • Touchcancel
      When the system stops tracking trigger, when the system is canceled, the document does not have a clear description.
      "Total" above four, is the touch event provided by the general, only for touch devices, the most commonly used is the first three.
      Because touch causes the screen to move, it can be used within event handlers of these events event.preventDefault() to prevent the default scrolling of the screen.
  • In addition to the commonly used DOM properties, touch events also contain the following three properties for tracking touch.
    • Touches: Represents an array of touch objects that are currently tracked by touching operations.
      When a finger is on the touch screen, event.touches.length=1
      When two fingers are on a touchscreen, event.touches.length=2 and so on.
    • Targettouches: An array of touch objects specific to the event target.
      Because the touch event is bubbling, this attribute is used to indicate the target object.
    • Changedtouches: An array of touch objects that represent what has changed since the last touch.
      Each Touch object contains the following properties:
    • ClientX: Touch the x-coordinate of the target in the viewport.
      ClientY: Touch the y-coordinate of the target in the viewport.
      Identifier: Identifies 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: Touch the DOM node destination.
      "How to use it?" 】

      Eventutil. AddHandler (Div,"Touchstart",functionEvent) {Div. innerhtml=Event. touches[0]. clientx+ ', ' +Event. touches[0] .clienty;}); Eventutil.addhandler (Div, "Touchmove", function (event) {event.preventdefault (); Div.innerhtml=event.touches [0].CLIENTX;}); Eventutil.addhandler (Div, "Touchend", function (event) {divevent.changedtouches[ 0] .clienty;            

      Use Clientx ... , you must indicate the specific touch object instead of directly indicating the array.
      event.touches[0]
      IntouchendIn the event handler function, when the event occurs, there is no touch object in touches, and the Changetouches collection is used at this time.
  • Gesture Events
    • Gesturestart: Triggered when one finger has been pressed on the screen while another finger touches the screen.
    • Gesturechange: triggered when the position of any finger on the touch screen changes.
    • Gestureend: Triggers when any finger moves away from the top of the screen.
      Note: Only two fingers touch the receiving container of an event to trigger these gesture events.
  • The relationship between touch events and gesture events
    1. When one finger is placed on the screen, an event is triggered, and touchstart if another finger is placed on the screen, the event is triggered gesturestart and then the event based on that finger is triggered touchstart .
    2. If one or two fingers swipe on the screen, the event will be triggered, gesturechange but as long as one finger is removed, the event will be triggered and the event will be triggered gestureend immediately toucheend .
  • Proprietary properties of Gestures
    • Rotation: Indicates the rotation angle caused by a finger change, negative values are counterclockwise, positive values are clockwise, and zero-based.
    • Scale: Represents the distance between two fingers, which shortens the distance, which starts at 1 and grows with distance.

js-Touch events, gesture events