class/Slide.js

  1. /**
  2.  * 封装鼠标触摸事件。
  3.  * @example
  4.  * const el = document.querySelector('#container')
  5.  * new Slide(el, 200, 200)
  6.  * el.addEventListener('slidemove', (e) => {
  7.  *   console.log(e.detail)
  8.  *   // {
  9.  *   //    // 滑动开始的点
  10.  *   //    startx: ,
  11.  *   //    starty: ,
  12.  *   //    // 滑动过程的点
  13.  *   //    endx: ,
  14.  *   //    endy: ,
  15.  *   //    // 滑动过程中与上一个点的距离
  16.  *   //    dx: ,
  17.  *   //    dy: ,
  18.  *   //    // 滑动过程中与开始点的距离
  19.  *   //    offsetx: ,
  20.  *   //    offsety:
  21.  *   // }
  22.  * })
  23.  */
  25. export class Slide {
  26.   // dom节点
  27.   el = null
  28.   // 手指移动过程中上一个坐标
  29.   prePoint = {
  30.     x: 0,
  31.     y: 0
  32.   }
  33.   // 自定义用户数据
  34.   customData = {
  35.     // 滑动开始的点
  36.     startx: 0,
  37.     starty: 0,
  38.     // 滑动过程的点
  39.     endx: 0,
  40.     endy: 0,
  41.     // 滑动过程中与上一个点的距离
  42.     dx: 0,
  43.     dy: 0,
  44.     // 滑动过程中与开始点的距离
  45.     offsetx: 0,
  46.     offsety: 0
  47.   }
  49.   /**
  50.    * @param {HTMLElement} el - html 节点。
  51.    * @param {Number} maxSlideDx - x 方向最大移动距离。
  52.    * @param {Number} maxSlideDy - y 方向最大移动距离。
  53.    * @param {Boolean} [limitArea=false] - 是否限制区域。
  54.    * 如果为true，当滑动超过 maxSlideDx 限定的区域内，
  55.    * 获取到的 dx 为 0，offsetx 为 ±maxSlideDx。
  56.    * 如果为false，当滑动超过 maxSlideDx 限定的区域内，
  57.    * 获取到的 dx 为 正常值，offsetx 为 ±maxSlideDx。
  58.    */
  60.   constructor (
  61.     el,
  62.     options = {
  63.       limitArea: false
  64.     }
  65.   ) {
  66.     this.el = el
  67.     // 单次的最大横向滑动距离
  68.     this.maxSlideDx = options.maxSlideDx
  69.     this.maxSlideDy = options.maxSlideDy
  70.     this.limitArea = options.limitArea
  71.     this._init()
  72.   }
  74.   _init () {
  75.     // 注册滑动开始、过程、结束事件
  76.     this.slidestart = new CustomEvent('slidestart', {
  77.       detail: this.customData,
  78.       bubbles: true,
  79.       cancelable: true
  80.     })
  81.     this.slidemove = new CustomEvent('slidemove', {
  82.       detail: this.customData,
  83.       bubbles: true,
  84.       cancelable: true
  85.     })
  86.     this.slideend = new CustomEvent('slideend', {
  87.       detail: this.customData,
  88.       bubbles: true,
  89.       cancelable: true
  90.     })
  91.     // 监听原生触摸事件
  92.     this.setSupportsPassive()
  93.     if ('ontouchstart' in window) {
  94.       this._on(this.el, 'touchstart', this._start)
  95.       this._on(this.el, 'touchmove', this._move)
  96.       this._on(this.el, 'touchend', this._end)
  97.     } else {
  98.       this._on(window, 'mousedown', this._start)
  99.       this._on(window, 'mousemove', this._move)
  100.       this._on(window, 'mouseup', this._end)
  101.     }
  102.   }
  104.   _on (el, event, fn) {
  105.     el.addEventListener(
  106.       event,
  107.       fn,
  108.       this.supportsPassive
  109.         ? {
  110.           capture: false,
  111.           passive: false
  112.         }
  113.         : false
  114.     )
  115.   }
  117.   _off (el, event, fn) {
  118.     el.removeEventListener(
  119.       event,
  120.       fn,
  121.       this.supportsPassive
  122.         ? {
  123.           capture: false,
  124.           passive: false
  125.         }
  126.         : false
  127.     )
  128.   }
  130.   setSupportsPassive () {
  131.     try {
  132.       const opts = Object.defineProperty({}, 'passive', {
  133.         get: () => {
  134.           this.supportsPassive = true
  135.           return true
  136.         }
  137.       })
  139.       window.addEventListener('testPassive', null, opts)
  140.       window.removeEventListener('testPassive', null, opts)
  141.     } catch (e) {
  142.       console.error(e)
  143.     }
  144.   }
  146.   checkNode (node) {
  147.     if (!node) {
  148.       return false
  149.     }
  150.     if (node === this.el) {
  151.       return true
  152.     }
  153.     return this.checkNode(node.parentNode)
  154.   }
  156.   _start = (e) => {
  157.     e.preventDefault()
  158.     let startx = 0
  159.     let starty = 0
  161.     if (e.type === 'mousedown') {
  162.       if (e.button !== 0) {
  163.         return
  164.       }
  165.       if (this.checkNode(e.target)) {
  166.         this.canSlide = true
  167.       } else {
  168.         this.canSlide = false
  169.         return
  170.       }
  171.       startx = e.pageX
  172.       starty = e.pageY
  173.     } else {
  174.       e.preventDefault()
  175.       startx = e.targetTouches[0].pageX
  176.       starty = e.targetTouches[0].pageY
  177.     }
  179.     // 初始化data
  180.     Object.assign(this.customData, {
  181.       startx,
  182.       starty,
  183.       endx: startx,
  184.       endy: starty,
  185.       dx: 0,
  186.       dy: 0,
  187.       offsetx: 0,
  188.       offsety: 0
  189.     })
  190.     this.prePoint = {
  191.       x: startx,
  192.       y: starty
  193.     }
  194.     this.el.dispatchEvent(this.slidestart)
  195.   }
  197.   _move = (e) => {
  198.     let endx = 0
  199.     let endy = 0
  201.     if (e.type === 'mousemove') {
  202.       if (!this.canSlide) {
  203.         return
  204.       }
  205.       endx = e.pageX
  206.       endy = e.pageY
  207.     } else {
  208.       endx = e.targetTouches[0].pageX
  209.       endy = e.targetTouches[0].pageY
  210.     }
  212.     // 相较于上一次touchmove点的距离
  213.     let dx = endx - this.prePoint.x
  214.     let dy = endy - this.prePoint.y
  215.     let offsetx = 0
  216.     let offsety = 0
  218.     // 单次滑动过程不能超过设定maxSlideDx值
  219.     if (this.maxSlideDx) {
  220.       if (this.customData.offsetx + dx >= this.maxSlideDx) {
  221.         dx = this.maxSlideDx - this.customData.offsetx
  222.         offsetx = this.maxSlideDx
  223.       } else if (this.customData.offsetx + dx <= -this.maxSlideDx) {
  224.         dx = -this.maxSlideDx - this.customData.offsetx
  225.         offsetx = -this.maxSlideDx
  226.       } else {
  227.         if (!this.limitArea) {
  228.           offsetx = this.customData.offsetx + dx
  229.         } else {
  230.           const x = endx - this.customData.startx
  232.           // 鼠标在界限范内
  233.           if (x > -this.maxSlideDx && x < this.maxSlideDx) {
  234.             // 处理边界问题
  235.             // 如果是上次鼠标位置在左边界外面，然后移动到里面
  236.             // 修正 dx 的值
  237.             if (this.prePoint.x - this.customData.startx < -this.maxSlideDx) {
  238.               dx = x - -this.maxSlideDx
  239.             } else if (
  240.               this.prePoint.x - this.customData.startx >
  241.               this.maxSlideDx
  242.             ) {
  243.               dx = x - this.maxSlideDx
  244.             }
  245.             offsetx = x
  246.           } else {
  247.             offsetx = this.customData.offsetx
  248.             dx = 0
  249.           }
  250.         }
  251.       }
  252.     } else {
  253.       offsetx = endx - this.customData.startx
  254.     }
  256.     // 单次滑动过程不能超过设定maxSlideDy值
  257.     if (this.customData.offsety + dy > this.maxSlideDy) {
  258.       dy = this.maxSlideDy - this.customData.offsety
  259.       offsety = this.maxSlideDy
  260.     } else if (this.customData.offsety + dy < -this.maxSlideDy) {
  261.       dy = -this.maxSlideDy - this.customData.offsety
  262.       offsety = -this.maxSlideDy
  263.     } else {
  264.       offsety = endy - this.customData.starty
  265.     }
  267.     Object.assign(this.customData, {
  268.       endx,
  269.       endy,
  270.       dx,
  271.       dy,
  272.       offsetx,
  273.       offsety
  274.     })
  275.     this.prePoint = {
  276.       x: endx,
  277.       y: endy
  278.     }
  279.     this.el.dispatchEvent(this.slidemove)
  280.   }
  282.   _end = (e) => {
  283.     let endx = 0
  284.     let endy = 0
  286.     if (e.type === 'mouseup') {
  287.       if (!this.canSlide) {
  288.         return
  289.       }
  290.       endx = e.pageX
  291.       endy = e.pageY
  292.       this.canSlide = false
  293.     } else {
  294.       endx = e.changedTouches[0].pageX
  295.       endy = e.changedTouches[0].pageY
  296.     }
  298.     Object.assign(this.customData, {
  299.       endx,
  300.       endy
  301.     })
  302.     this.el.dispatchEvent(this.slideend)
  303.   }
  305.   setMaxSlideDx (ds) {
  306.     this.maxSlideDx = ds
  307.   }
  309.   setMaxSlideDy (ds) {
  310.     this.maxSlideDy = ds
  311.   }
  313.   // 销毁自定义事件
  314.   destroy () {
  315.     this._off(this.el, 'touchstart', this._start)
  316.     this._off(this.el, 'touchmove', this._move)
  317.     this._off(this.el, 'touchend', this._end)
  318.     this._off(window, 'mousedown', this._start)
  319.     this._off(window, 'mousemove', this._move)
  320.     this._off(window, 'mouseup', this._end)
  321.   }
  322. }