JS移动端事件

最新推荐文章于 2024-07-20 23:54:17 发布

benlalagang

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量2k

点赞数 4

分类专栏：基础文章标签： javascript

本文链接：https://blog.csdn.net/benlalagang/article/details/126121905

版权

基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

触屏事件

这类事件专属于移动端在PC端并不响应

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。

常见的触屏事件如下：

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动触发
touchend	手指从一个DOM元素上移开时触发

触摸事件对象 TouchEvent

是一类描述手指在触摸平面的状态变化事件，这类事件用于描述一个或多个触点，使开发者可以监视触点的移动增加和减少

touchstart touchmove touchend 三个事件都会有各自的事件对象

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生的改变的列表，从无到有，从有到无的变化

小示例代码

  let box1 = document.querySelector('#box')

  box1.addEventListener('touchstart',function (e) {
    console.log('类似点击')// 手指按下
    console.log(e);
    console.log(e.touches[0])// 整个页面的触点列表
    console.log(e.targetTouches)// 点击目前事件元素的触点列表
  })

  box1.addEventListener('touchmove',function () {
    console.log('试图拖动')
  })

  box1.addEventListener('touchend',function (e) {
    console.log('离开了')// 手指离开（上升）
    console.log(e.changedTouches) // 记录离开时的信息数据
    // 当手指离开元素触点时 就没有了touches  targetTouches  但是会有changedTouches 它们都是列表 浏览器模拟时只有一个[0]
  })

移动端手指拖动元素的案例：

核心原理就是计算触点移动的位置再把移动的位置更新给被拖动元素的样式

touchstart 触碰元素时：获取触点初始坐标，同时获得元素的初始位置

touchmove 移动手指时：计算手指的滑动距离，并且移动盒子

touchend 最后离开手指

手指拖动到屏幕边界会触发屏幕滚动这里可以阻止默认事件 e.preventDefault()

上代码：

 let box1 = document.querySelector('#box'),
      touchX = null,
      touchY = null,
      boxX = null,
      boxY = null;


  box1.addEventListener('touchstart',function (e) {
        touchX = e.targetTouches[0].pageX,
        touchY = e.targetTouches[0].pageY,
        boxX = box1.offsetLeft,
        boxY = box1.offsetTop;
        //console.log(touchX,touchY,boxX,boxY)
  })

  box1.addEventListener('touchmove',function (e) {
    let moveX = e.targetTouches[0].pageX - touchX,
        moveY = e.targetTouches[0].pageY - touchY,
        boxMx = moveX + boxX,
        boxMy = moveY + boxY;
        box1.style.left = boxMx + 'px'
        box1.style.top = boxMy + 'px'
        e.preventDefault()
  })

  box1.addEventListener('touchend',function (e) {

  })

元素.classList方法

ele.classList 返回元素的类名

ele.classList[0] 返回元素第一个类名

ele.classList.add('three') 添加一个类名不会覆盖之前的类名字符串前不用加点

ele.classListremove('one') 删除类名

切换类：

btn.onclick = function () { document.body.classList.toggle('bg') }

移动端返回顶部和PC端一致

封装一个动画函数

调用 window.scroll(0,目标Y)

在滚顶到一定程度出现返回顶部的按钮点击触发返回顶部的函数

 let div1 = document.querySelector('div'),
    span = document.querySelector('span'),
    divT = div1.offsetTop;

  window.addEventListener('scroll',function () {
      if (window.pageYOffset > divT){
          span.style.display = 'block'
      }else {
        span.style.display = 'none'
      }
  })

  span.addEventListener('click',function () {
      goTop(window,0)
  })

  function goTop(obj,num,callback) {
    clearInterval(obj.timeOut) // 清除以前的定时器 只保留一个定时器执行
    obj.timeOut = setInterval(function () {
      let step = (num - window.pageYOffset) / 10
      // 取整 三元表达式 步长取为整数 正数就往大了取 负数就往小了取
      step = step > 0 ? Math.ceil(step) : Math.floor(step)
      if (window.pageYOffset == num){
        clearInterval(obj.timeOut)
        // if (callback){
        //   callback()
        // }
        callback && callback()
      }
      window.scroll(0,window.pageYOffset + step)
    },15)
  }