你可能需要的小知识(一)

时间:2021-2-20 作者:admin

你可能需要的小知识(一)

移动滑块在PC端与移动端的兼容

前言


大家好,我是阿k。从这篇文章开始,这个系列就计划跟大家分享我日常工作中碰到的一些问题以及我的解决方案,也许你正好需要,我也希望能够帮到你,OK,话不多说,我们就进入主题吧!

背景


因为公司目前的主要业务根据地是PC端网页,而且我前脚进公司,后脚就来了一个测试小妹妹,呸,是小姐姐,然后给我提了十几个bug(我现在知道为什么不要得罪测试了,哇的一声哭出来,我改还不行吗),微笑,世界如此美好~。然后,其中有一个bug就是,在ipad端不能滑动注册时发送验证码的滑块,ok,我们来看一下怎么回事。

情景再现


你可能需要的小知识(一)

来人,上代码


(默默的把图片拉过来)

你可能需要的小知识(一)

众所周知,我们在绑定事件的时候,可以通过$event来获取到当时的事件信息,当然页包括鼠标事件啦,那么既然如此,我们在ipad上能使用mouse事件吗?答案当然是肯定的啦,肯定不行啦(只用手指哪里来的鼠标嘛)。(此时我听见远远的有同学问,那是什么事件)ok,既然如此我只好勉为其难的回答一下(脸红,羞涩),他就是touch事件!!!

没错,就是touch事件,所以我们在给元素绑定的时候,因为需要考虑到移动端的设备,那么就需要用到touchStart事件,所以还需要绑定这样一个事件:

你可能需要的小知识(一)

绑定完事件之后,自然是定义事件啦,那定义事件的时候,我们就需要来削微的判断一下,到底是mouse还是touch。

你可能需要的小知识(一)

然后,紧跟着,因为移动距离的判断,也同样需要用到事件本身,所以我们还需要在移动过程中进行一个判断,因此,在移动的函数计算时,

你可能需要的小知识(一)

最后,我们需要对这两个事件进行一个监听和销毁,也就可以在钩子函数中添加两个监听事件,来收尾我们这次的工作。

你可能需要的小知识(一)

结语


整个过程其实很简单,相信各位大佬也一定有自己的更好的方法,我这里记录下来也是帮自己做一个知识回顾,也希望能够帮到下一个碰到这个问题的同学吧。因为这是第一次写,如果不足或者不正确地方,希望大家多多指正,我一定尽快修改,谢谢大家!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。