onresize事件会被多次触发_如何有效的“清除”浏览器默认下滑事件

039d924fa762e27f714e15d77c22cbc5.png

在今天的练习中,我遇到了一个头疼的问题。因为我的学习还没有进行到移动端的进度,但是因为舅舅需要一个移动端的宣传网站,它类似于ppt,通过上下滑动来实现更换页面,迫不得已,通过查阅资料,初次接触touch事件。

touch事件分为:1.touchstart 手指触摸屏幕时触发,即使已经有手指在屏幕上也会触发 2.touchmove 手指在屏幕滑动时触发 3.touchend 手指从屏幕时移开时触发。三种事件,这些事件的使用方法类似于pc端的mouse,因此使用起来并没有感到生疏。

但是在编写完代码传送到手机端查看时,却发现,移动端浏览器默认的下滑事件也会触发,虽然在浏览器默认下滑事件触发之后,自己编写的下滑事件也会跟着触发,但是却极大的影响了用户体验,出现的情况如下图:

2dce84b0cd380be5d4eddfb3e3093805.png

我的第一反应就是,我要清除浏览器的默认下滑事件,我在网上查阅了很长一段时间的代码,经过了多次尝试,由于pc端无法测试移动端浏览器的状况,因为本身编写的就只是一个简单的静态页面所以我最开始也并没有开启自己的局域网。因此,每一次测试,我都传送到手机上并解压查看,最终有了以下结果:

b5dbc02d57555c90d3155ae470867429.png

网上的解决方法稀奇古怪,我本身并不没有 接触移动端程序编写,所以很多代码其实是看不懂的,更无法判断其可靠性,我看过一个帖子,清除默认事件更需要先判断是pc端还是移动端,移动端中再判断是安卓还是ios,我尝试着用获取window对象并将它的touch事件解绑,然而这也没有起到作用,此时,我并不知道应该如何才能正确的获取移动端浏览器对象,因此,我在我加的群里面咨询,当问题的时候,还没有人回答我,我顺便着翻看了上面的聊天记录,有一位初学者朋友在询问,如何隐藏超出范围的图片,很明显overflow: hidden可以起到这个作用,现在我也用来触发BFC来清除浮动,我突然想到在最初学习清浮动的时候,我们是这么做的:在结尾后面加上一个隐藏的内容,封头封尾。

我意识到,在我的知识水平没有达到的时候与其病急乱投医,我完全可以另辟蹊径,用已经具备的知识来解决问题,我可以在body前面加上一个隐藏内容,从而使浏览器无法到达顶端,就无法触发浏览器的默认下滑事件。我丝毫不怀疑这比解绑默认事件更快速有效的可以达到我的目的。

代码如下:

body

没有最对的方法,只有最合适的,遇到问题的时候,方法有很多,不应该拘泥于一种,另辟蹊径,其结果未必就不是最优解。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值