移动端事件

Posted 2020-08-21

Touchstart 手指触摸， = mousedown

Touchend 手指抬起 = mouseup

Touchmove 手指移动 = mousemove

 

阻止冒泡：e.stopPropagation();

                     CancelBubble

 

阻止默认事件

document.addEventListener("touchsmovve",function(ev) {

         ev.preventDefault();

});

//阻止掉如：文字滚动，系统菜单，页面的回弹效果

//隐患：页面滚动条失效

 

事件点透

1 在移动端pc事件，会有300毫秒的延时

2 我们点击了页面以后，浏览器会记录下点下去的坐标

3 300毫秒以后，找到现在在这的元素，执行事件

解决办法

         1 阻止默认事件

         2 在移动端不适用鼠标事件，不用a标签做页面跳转（不用a标签还可以防止误触）

 

触摸事件touchEvent

         1 event.touches 记录手指在屏幕上的相关信息

         2 event.targetTouches记录手指在当前元素上的相关信息

         3 event.changedTouches 记录手指在当前元素上的相关信息（触发当前事件的手指）

 

自定义滑屏代码

Js部分

/*

         1 手指按下去的时候，记录手指坐标

         2 手指移动的时候，记录手指坐标

         3 用移动后的坐标减掉按下去的坐标 = 手指移动的距离

         4 改变元素的坐标，用元素初始坐标坐标 + 加上手指移动的距离

         */

         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代码

<div id="wrap">

                       <div id="scroll">

                                hsdhfasd <br />

                                hsdhfasd <br />

                                hsdhfasd <br />

                                hsdhfasd <br />

                       </div>

             </div>