通过滑动翻页效果实现和移动端click事件问题
前述
本文很短~
主要是为了和讲述移动端click和js事件机制导致的一个问题。
(咳咳,其实几句话就能写完的还要水一篇文章,不愧是我…
正文
最近做了一个小活动,里面要用到一个效果滑动翻页。大概是这样的
<!-- HTML代码 --> <div class="page-container"> <div class="page" style="background: #dc3b26">1</div> <div class="page" style="background: #f3b03d">2</div> <div class="page" style="background: #44a2f8">3</div> </div>
在css中,因为是滑动翻页,所以我们要保证“始终只有一屏”,这个可以放在全局样式表里控制,然后是其中的“每一页”都要占满父元素 —— 这里其实用了“div是块元素,无外力情况下竖直排列”的特性。
/ css样式 / html, body{ margin: 0; padding: 0; width: 100%; height: 100vh; overflow: hidden; font-size: 60px; } .page-container{ width: 100%; height: 100%; } .page-container .page{ width: 100%; height: 100%; }
其JS实现也很简单因为在移动端,所以使用了touchstart
、touchmove
及touchend
事件来实现手势滑动功能
- start(刚按下)时记录此时的手指位置——作为初始值;
- 在move(触摸滑动)时根据实时的手指位置和初始手指位置变量实现要求判断,在本文场景为代表的场景下这一步一般还要求出“移动距离”实时赋值;
- 在end(手指离开)时(也有直接在move时进行的)进行收尾工作——比如图片滑动完全划过去、元素跑到结束位置、将事件监听取消;
// 这里是控制全局js的文件 // 全局阻止浏览器默认行为 document.addEventListener("touchstart",function(e){ if(e.cancelable){ e.preventDefault(); } },{passive: false}) // {passive: false}就是告诉前面可能有需要重置行为的代码 document.addEventListener("touchmove",function(e){ if(e.cancelable){ e.preventDefault(); } },{passive: false})
// JavaScript代码 let curPageIndex=0; let pageContainer=document.querySelector(".page-container"); let pageNumber=pageContainer.children.length; //页面的数量 // 文档的视窗高度(这里就是一屏的高度) let cHeight=document.documentElement.clientHeight; // 设置页面容器的margin-为合适的值,让其显示在视野中 function toPage(){ pageContainer.style.transition="all .5s ease"; pageContainer.style.marginTop=-curPageIndexcHeight+"px"; // 变化完成后去掉过渡效果 ! pageContainer.addEventListener("transitionend",function(){ pageContainer.style.transition="none"; },{once:true}) } toPage() pageContainer.ontouchstart=function(e){ let y=e.changedTouches[0].clientY; //手指按下的纵坐标 pageContainer.ontouchmove=function(e){ let dis=e.changedTouches[0].clientY-y; //计算距离 // 计算page-container的margin- let m=-curPageIndexcHeight+dis if(m>0){ m=0; }else if(m<-(pageNumber-1)cHeight){ m=-(pageNumber-1)cHeight; } // 实时改变位置 pageContainer.style.marginTop=m+"px"; } pageContainer.ontouchend=function(e){ let dis=e.changedTouches[0].clientY-y; // 如果滑动距离实在太短,就回到滑动前的位置状态 if(Math.abs(dis)<=60){ toPage() }else if(dis>0 && curPageIndex>0){ curPageIndex--; toPage() }else if(dis<0 && curPageIndex<pageNumber-1){ curPageIndex++; toPage() } // 手指离开后,取消监听事件 pageContainer.ontouchmove=null; pageContainer.ontouchend=null; } }
至此,功能上似乎很完美。但这时候,我们在第一个page里添加一个button
<div class="page" style="background: #dc3b26"> <button onclick="alert('哈哈哈')" class="but">click me!</button> 1 </div>
然后到页面上查看效果
无效!
这是因为在上方全局js文件里我们加了“阻止浏览器默认事件”的代码。
——在移动端浏览器中,click事件和mousestart事件是被触发的。因为移动端浏览器是没有click事件的,它是由mouse事件模拟的! 也正是这个原因,才有了所谓的“移动端浏览器300ms延迟”的问题 1 。
——还有就是,在微信自带的浏览器中,有一个“触顶下拉回弹”的操作,这其实是不应该的。它也属于浏览器默认事件。
所以一般我们需要禁止掉这些东西。
如上面所示,全部禁止掉总会造成一些困扰,怎么办?
H5提供了“自定义属性”,针对本文方法,我们完全可以 —— 在全局事件里检测当前触发的元素有没有某一个自定义属性,如果有,就什么也不拦截;否则就执行禁止默认行为的代码
比如
<button data-default="true" onclick="alert('哈哈哈')" class="but">click me!</button>
将上面“控制全局js的文件”内容改为如下
// 全局阻止浏览器默认行为 document.addEventListener("touchstart",function(e){ if(e.target.dataset.default){ return; } if(e.cancelable){ e.preventDefault(); } },{passive: false}) document.addEventListener("touchmove",function(e){ if(e.target.dataset.default){ return; } if(e.cancelable){ e.preventDefault(); } },{passive: false})
就OK了
其实还有另一种“解法”既然上面说了,移动端click实际上是通过mouse事件模拟的,那么我们可以从mousestart事件入手;又因为button元素是“第一个页面”内的(子)元素,所以可以用阻止事件冒泡
<!-- button就是普通的button --> <button class="but">click me!</button>
document.querySelector(".but").addEventListener("touchstart",function(e){ e.sPropagation(); alert('噶哈哈'); },false)
关于捕获和冒泡→
我们要知道的是当我们鼠标按下一个按钮时,并不是“点击了一个按钮”,而是在这个区域内,鼠标(上的按键)被按下,操作系统和浏览器把这个信息对应到了“按钮”所在区域并触发其逻辑。
事实上鼠标点击并没有位置信息,是操作系统一直在监听鼠标移动,根据累积的位移计算出来的坐标,将其传给浏览器。
那么,把这个坐标转换为具体的元素上的事件的过程,就可称作“捕获”。那“冒泡”呢?这个不好解释,但有一点想必你是明白的当你按下电视开关时,你也按到了电视!
这就是很多文章会讲到的“冒泡过程由内向外,捕获过程由外向内”,或者说是“洋葱模型”。
还有一点就是事件addEventListener
的第三个参数true/false
,即为“是捕获/冒泡”。(别多想,这只是浏览器提供的事件模型之一。无论是否监听,在一个事件发生时,捕获和冒泡总是先后发生的)
到此这篇关于滑动翻页效果实现和移动端click事件问题的文章就介绍到这了,更多相关滑动翻页效果内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程