通过滑动翻页效果实现和移动端click事件问题


Posted in Javascript onJanuary 26, 2021

前述

本文很短~
主要是为了总结和讲述移动端click和js事件机制导致的一个问题。
(:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我…


正文

最近做了一个小活动,里面要用到一个效果:滑动翻页。大概是这样的:

通过滑动翻页效果实现和移动端click事件问题

<!-- 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实现也很简单:因为在移动端,所以使用了touchstarttouchmovetouchend事件来实现手势滑动功能:

  • 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-top为合适的值,让其显示在视野中
function toPage(){
	pageContainer.style.transition="all .5s ease";
	pageContainer.style.marginTop=-curPageIndex*cHeight+"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-top
		let mtop=-curPageIndex*cHeight+dis
		if(mtop>0){
			mtop=0;
		}else if(mtop<-(pageNumber-1)*cHeight){
			mtop=-(pageNumber-1)*cHeight;
		}
		// 实时改变位置
		pageContainer.style.marginTop=mtop+"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>

然后到页面上查看效果:

通过滑动翻页效果实现和移动端click事件问题

无效!

这是因为在上方全局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事件问题


其实还有另一种“解法”:既然上面说了,移动端click实际上是通过mouse事件模拟的,那么我们可以从mousestart事件入手;又因为button元素是“第一个页面”内的(子)元素,所以可以用阻止事件冒泡

<!-- button就是普通的button -->
<button class="but">click me!</button>
document.querySelector(".but").addEventListener("touchstart",function(e){
	e.stopPropagation();
	alert('噶哈哈');
},false)

通过滑动翻页效果实现和移动端click事件问题

关于捕获和冒泡→

我们首先要知道的是:当我们鼠标按下一个按钮时,并不是“点击了一个按钮”,而是在这个区域内,鼠标(上的按键)被按下,操作系统和浏览器把这个信息对应到了“按钮”所在区域并触发其逻辑。
事实上鼠标点击并没有位置信息,是操作系统一直在监听鼠标移动,根据累积的位移计算出来的坐标,将其传给浏览器。
那么,把这个坐标转换为具体的元素上的事件的过程,就可称作“捕获”。那“冒泡”呢?这个不好解释,但有一点想必你是明白的:当你按下电视开关时,你也按到了电视!
这就是很多文章会讲到的“冒泡过程由内向外,捕获过程由外向内”,或者说是“洋葱模型”。
还有一点就是:事件addEventListener的第三个参数 true/false ,即为“是捕获/冒泡”。(别多想,这只是浏览器提供的事件模型之一。无论是否监听,在一个事件发生时,捕获和冒泡总是先后发生的)

到此这篇关于滑动翻页效果实现和移动端click事件问题的文章就介绍到这了,更多相关滑动翻页效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
全面解析js中的原型,原型对象,原型链
Jan 25 #Javascript
js中实现继承的五种方法
Jan 25 #Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
javascript实现点击产生随机图形
Jan 25 #Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
json.stringify()与json.parse()的区别以及用处
Jan 25 #Javascript
You might like
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php构造函数与析构函数
2016/04/23 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
JS定义回车事件(实现代码)
2013/07/08 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
机器学习python实战之决策树
2017/11/01 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python常见的pandas用法demo示例
2019/03/16 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
华为python面试题
2016/05/03 面试题
函授本科自我鉴定
2013/11/03 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL