博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手把手教你做一个原生js拖动滑块【兼容PC和移动端】
阅读量:5012 次
发布时间:2019-06-12

本文共 1040 字,大约阅读时间需要 3 分钟。

废话少说:

在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列“touch”事件来替代PC端的“mouse”事件。

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

touchcancel:     //系统取消touch事件的时候触发,这个好像比较少用

 

每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表

touches:     //当前屏幕上所有手指的列表

targetTouches:      //当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches:     //涉及当前事件的手指的列表,尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:

clientX / clientY:      //触摸点相对浏览器窗口的位置

pageX / pageY:       //触摸点相对于页面的位置

screenX  /  screenY:    //触摸点相对于屏幕的位置

identifier:        //touch对象的ID

target:       //当前的DOM元素

 

 

 

			
鼠标拖动小方块

用鼠标拖动小方块0%

0

  兼容PC端和移动端:

			
鼠标拖动小方块

用鼠标拖动小方块0%

0

  

转载于:https://www.cnblogs.com/libin-1/p/6220056.html

你可能感兴趣的文章
ASP.NET Core文件上传与下载(多种上传方式)
查看>>
编译Console程序时,可以指定Main入口函数
查看>>
虚函数的效率问题
查看>>
POJ 1860 Currency Exchange(SPFA 判断有无“正”环)
查看>>
angular6项目中使用scss
查看>>
书籍阅读目录(给愚钝的自己)
查看>>
-[UIKeyboardLayoutStar release]: message sent to deallocated instance
查看>>
无法执行该操作,因为链接服务器 "XXX" 的 OLE DB 访问接口 "SQLNCLI10" 无法启动分布式事务。...
查看>>
JDK7 新特性
查看>>
广告地址屏蔽
查看>>
收缩SqlServer数据库日记方法
查看>>
每日英语:15 places to find inspiration
查看>>
as3播放视频卡的解决方法
查看>>
python3 re模块正则匹配字符串中的时间信息
查看>>
BCP IN示例
查看>>
cacheline基本理论
查看>>
Linux-信号
查看>>
font-awesome
查看>>
数学专业的数学与计算机专业的数学的比较(转)
查看>>
力扣—— 删除字符串中的所有相邻重复项
查看>>