Mobile-side events

Touchstart finger touch, = MouseDown

Touchend Finger lift = MouseUp

Touchmove Finger movement = MouseMove

Block bubbling: e.stoppropagation ();

Cancelbubble

Block Default Events

Document.addeventlistener ("Touchsmovve", function (EV) {

Ev.preventdefault ();

});

Block out such as: Text scrolling, System menu, page rebound effect

Hidden trouble: Page scroll bar invalidation

Event Point penetration

1 in Mobile PC event, there will be a delay of 300 milliseconds

2 After we click on the page, the browser will record the next point of the coordinates

3 300 milliseconds later, find the element now in this, execute the event

Solutions

1 Blocking default Events

2 No mouse events on the mobile side, do not use a tag to do the page jump (not a tag can also prevent accidental touch)

Touch Event TouchEvent

1 event.touches record finger-related information on the screen

2 Event.targettouches Record the information about the finger on the current element

3 Event.changedtouches records information about the finger on the current element (the finger that triggers the current event)

Customizing the slide-screen code

JS section

/*

1 when the finger is pressed down, record the finger coordinates

2 When the finger moves, record the finger coordinates

3 Use the moved coordinates to subtract the pressed coordinates = the distance the finger moves

4 Change the coordinates of the element, with the initial coordinate of the element + the distance the finger moves

*/

Window.onload = function () {

var wrap = document.queryselector (' #wrap ');

var scroll = document.queryselector (' #scroll ');

var startPoint = 0;

var Startei = 0;

var maxtop = wrap.clientheight-scroll.offsetheight;

Wrap.addeventlistener (' Touchstart ', function (e) {

Console.log (' jjj ');

var touch = e.changedtouches[0];

StartPoint = Touch.pagey;

Startei = Scroll.offsettop;

})

Wrap.addeventlistener (' Touchmove ', function (e) {

Console.log (' ddddjjj ');

var touch = e.changedtouches[0];

var nowpoint = Touch.pagey;

var dis = nowpoint-startpoint;

var top = Startei + dis;

if (top>0) {top = 0};

if (top<maxtop) {top = maxtop};

Scroll.style.top = top + ' px ';

Console.log (DIS);

})

}

HTML code

<div id= "Wrap" >

<div id= "Scroll" >

HSDHFASD <br/>

HSDHFASD <br/>

HSDHFASD <br/>

HSDHFASD <br/>

</div>

</div>

Mobile-side events