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

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

前言

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

背景

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

情景再现

就是这个最常见的校验滑块！！一开始我天真的以为，这不是很简单，不是分分钟搞定？过了五分钟…又过了五分钟…ok,这里我们先跳过个500分钟！但是，这真的只要5分钟就可以解决！

来人，上代码

(默默的把图片拉过来)

最初他的代码是这样写的，也就是本身只绑定了一个mouse事件，那么既然如此，又怎么可能在ipad上滑动呢？

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

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

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

如果监测到touch事件，那自然是移动端了，如果没有，那我们就乖乖的用mouse事件吧！

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

我们这样就可以计算出，到底是鼠标还是手指的移动距离，和我们需要的距离是否相等，就判断出是否滑动到位啦，怎么样，是不是很简单？！另外这里要注意一点，就是移动过程中，需要添加一个阻止默认事件，避免屏幕跟随滑动。

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

结语

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

移动滑块在PC端与移动端的兼容相关推荐

javascript 判断前端是 pc端还是移动端
javascript 判断前端是 pc端还是移动端 <!DOCTYPE html> <html lang="en"> <head>< ...
html自适应pc窗口大小_自适应技术很难吗？为什么Shopyy平台将网站分为PC端和移动端...
什么是自适应网站?其实自适应更专业的说法是响应式网站.通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版本的网站.近年来,各种大屏幕移动设备的普及,响应式网站也受到了更多人的 ...
网站PC端跟移动端有哪些不同的区别所在？
移动时代的来临,不断的发展手机.平板等移动端设备,帮助用户更快更高效的找到有价值的信息,移动端也确实能吸引更大的流量,助力企业高速发展.那么针对PC端网站和移动端的优化又有哪些区别呢?下面一起来了解一 ...
pc 页面在移动端怎么获取放大倍数、_百度移动搜索开放适配服务的3种方法
为了提升用户的移动搜索结果浏览体验,百度移动搜索对具有对应手机站的PC站提供"开放适配"服务. 如果您同时拥有PC站和手机站,且二者能够在内容上对应,您可向百度"提交&q ...
css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十六)利用PC端和移动端BUG
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
基于webpack的PC端和mobile端开发以及生产环境的搭建
我们用webpack做单页面应用开发应该尝试过很多次了,如果在同一个项目需要支持PC端和移动端,做成多页面应用,开发时能根据请求的终端返回不同的内容,应该怎么做呢?以下描述的是我尝试的一种方案,并且以 ...
根据浏览器navigator区分PC端还是移动端，区分操作系统，区分浏览器型号
1,区分PC端还是移动端 methods:{_isMobile() {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod| ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...

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

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

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

前言

背景

情景再现

来人，上代码

结语

移动滑块在PC端与移动端的兼容相关推荐

最新文章

热门文章