废话少说:
在 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 元素
- <!DOCTYPE html>
- <html lang="zh-cn">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title>鼠标拖动小方块</title>
- <style type="text/CSS">
- .lineDiv {
- position: relative;
- height: 5px;
- background: red;
- width: 300px;
- margin: 50px auto;
- }
- .lineDiv .minDiv {
- position: absolute;
- top: -5px;
- left: 0;
- width: 15px;
- height: 15px;
- background: green;
- cursor: pointer
- }
- .lineDiv .minDiv .vals {
- position: absolute;
- font-size: 20px;
- top: -45px;
- left: -10px;
- width: 35px;
- height: 35px;
- line-height: 35px;
- text-align: center;
- background: blue;
- }
- .lineDiv .minDiv .vals:after {
- content: "";
- width: 0px;
- height: 0px;
- border-top: 6px solid blue;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-bottom: 6px solid transparent;
- display: block;
- margin-left: 11px;
- }
- </style>
- </head>
- <body>
- <center>
- <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
- </center>
- <div id="lineDiv" class="lineDiv">
- <div id="minDiv" class="minDiv">
- <div id="vals" class="vals">0</div>
- </div>
- </div>
- <script>
- window.onload = function() {
- var lineDiv = document.getElementById('lineDiv'); //长线条
- var minDiv = document.getElementById('minDiv'); //小方块
- var msg = document.getElementById("msg");
- var vals = document.getElementById("vals");
- var ifBool = false; //判断鼠标是否按下
- //鼠标按下方块
- minDiv.addEventListener("touchstart", function(e) {
- e.stopPropagation();
- ifBool = true;
- console.log("鼠标按下")
- });
- //拖动
- window.addEventListener("touchmove", function(e) {
- console.log("鼠标拖动")
- if(ifBool) {
- var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var x
- var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
- var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值
- if(minDiv_left >= lineDiv.offsetWidth - 15) {
- minDiv_left = lineDiv.offsetWidth - 15;
- }
- if(minDiv_left < 0) {
- minDiv_left = 0;
- }
- //设置拖动后小方块的left值
- minDiv.style.left = minDiv_left + "px";
- msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
- vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
- }
- });
- //鼠标松开
- window.addEventListener("touchend", function(e) {
- console.log("鼠标弹起")
- ifBool = false;
- });
- //获取元素的绝对位置
- function getPosition(node) {
- var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
- var top = node.offsetTop;
- current = node.offsetParent; // 取得元素的offsetParent
- // 一直循环直到根元素
- while(current != null) {
- left += current.offsetLeft;
- top += current.offsetTop;
- current = current.offsetParent;
- }
- return {
- "left": left,
- "top": top
- };
- }
- }
- </script>
- </body>
- </html>
来源: