移动端事件

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>

posted @ 2016-11-27 23:50  花落无声Cjie  阅读(406)  评论(0编辑  收藏  举报