原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】

本文实例讲述了原生js实现可兼容PC和移动端的拖动滑块功能。分享给大家供大家参考，具体如下：

废话少说：

在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
      
    
    
  

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。