Shulou(Shulou.com)06/01 Report--

Part one: four touch events

1.touchstart: whenever you place your finger on the screen (no matter how many), the touchstart event will be triggered.

2.touchmove: this event is triggered continuously when we swipe our fingers across the screen. If we don't want the page to slide with it, we can use event's preventDefault to prevent this default behavior.

3.touchend: the touchend event is triggered when the finger slides away from the screen.

4.touchcancel: triggers when the system stops tracking and touching. For example, a sudden page alert () a prompt box during touch will trigger the event, which is less used.

Part two: four touch objects

1. Touches, which is a class array object that contains all the finger information. If there is only one finger, then we use touches [0] to represent it.

2. TargetTouches . Finger information of the finger in the target area.

3. ChangedTouches: the finger information that last triggered the event.

4. When touchend, the touches and targetTouches information will be deleted, and the last information saved by changedTouches is best used to calculate finger information.

Part III: example 1

Take a look at the effect picture first:

The principle of its implementation is very simple, that is, set the postion property of the red circle to absolute, and then, when we slide it, we trigger the touchmove event and set its Left and top to event's pageX and pageY. In order to ensure that the trigger center and the center of the circle are in the same position, you only need to add pageX plus half of width and pageY plus half of height.

The source code is as follows

TouchExample # touchDiv {position: absolute; width: 50px; height: 50px; top: 20px; left: 20px; text-align: center; line-height: 50px; color:white; border-radius: 50%; background-color: red } click me var touchDiv = document.getElementById ("touchDiv"); var xtraining y; touchDiv.addEventListener ("touchstart", canDrag); touchDiv.addEventListener ("touchmove", drag); touchDiv.addEventListener ("touchend", nodrag); function canDrag (e) {console.log ("god start") } function drag (e) {$("# touchDiv") .css ("left", e.touches [0] .pageX-25); $("# touchDiv") .css ("top", e.touches [0] .pageY-25);} function nodrag () {console.log ("god end");}

Part IV: example 2

This example is the implementation of the drop-down refresh feature. The effect is as follows:

The source code is as follows

Drop-down refresh * {margin:0; padding: 0; font-size:15px;} .header {height: 50px; line-height: 50px; text-align: center; background-color: blue; color:white; font-size: 23px } .drag _ to_refresh {align-items: center; padding-left: 155px; background-color: # bbb; color:yellow; display: none;} .refresh {height: 50px; line-height: 50px; text-align: center Background-color: # bbb; color: green; display: none;} .drag {text-align: center; background-color: lightgray; position: relative; padding:20px; text-indent: 1em; line-height: 30px; font-size:18px } the government cloud is refreshing. E-Government Cloud (E-government cloud) belongs to the government cloud, which combines the characteristics of cloud computing technology, simplifies, optimizes and integrates government management and service functions, and realizes various business processes and functional services in government affairs through information means, so as to provide a reliable basic IT service platform for government departments at all levels. _ window.onload = function () {var initX; var drag_content = document.querySelector (".drag"); var drag_to_refresh = document.querySelector (".drag _ to_refresh"); var refresh = document.querySelector (".refresh"); drag_content.addEventListener ("touchmove", drag); drag_content.addEventListener ("touchstart", dragStart); drag_content.addEventListener ("touchend", dragEnd) Function dragStart (e) {initY = e.touches [0] .pageY; console.log (initX);} function drag (e) {drag_to_refresh.style.display = "block"; drag_to_refresh.style.height = (e.touches [0] .pageY-initY) + "px"; console.log (drag_to_refresh.style.height) If (parseInt (drag_to_refresh.style.height) > = 100) {/ / Note: because the value obtained by height is px, parse drag_to_refresh.style.height = "100px" with parseInt; if (parseInt (drag_to_refresh.style.height) > 80) {drag_to_refresh.style.lineHeight = drag_to_refresh.style.height Drag_to_ refresh [XSS _ clean] = "release refresh";} function dragEnd (e) {if (parseInt (drag_to_refresh.style.height) > 80) {refresh.style.display = "block"; setTimeout (reload,1000);} drag_to_refresh.style.display = "none" } function reload () {location.reload ();}}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.