前端拖动导致触发点击事件的bug

最新推荐文章于 2024-12-21 14:21:20 发布

原创最新推荐文章于 2024-12-21 14:21:20 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

vue3 同时被 2 个专栏收录

25 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文介绍了一种通过计算鼠标触发次数来区分拖动和点击事件的方法，避免了直接比较位置差值的局限性，适用于前端交互设计。作者通过实例展示了如何在Vue应用中实现这一功能，并包含了靠边判断逻辑和事件触发条件。

一、原理

看别人都是判断初始位置和最终位置之间的距离差值，感觉不好用，
我是计算拖动函数触发几次来判断是拖动还是点击

二、代码

// 函数部分
const tuodong = (e) => {
// 初始化次数
  let num = 0
  document.onmousemove = (e) => {
  // 触发拖动函数，次数+1
    num += 1
	// 我用的是vue，直接构造style，名字不重要，就是tyle
    classlist.value = {left: (x.value-20) + "px", top: (y.value-20) + "px"}
  }
  document.onmouseup = () => {
    // 根据拖动的次数判断，如果小于等于5次，就是点击事件
    if(num <=3){
    // 这就是我要触发的点击事件
      changeqiehuan()
      return
    }
    // 下面就是我写的靠边判断
    const zongkuandu = document.documentElement.clientWidth
    const zonggaodu = document.documentElement.clientHeight
    if (x.value >= zongkuandu / 2) {
      if (y.value < 0) {
        classlist.value = {right: "0", top: "0"}
      } else if (y.value > zonggaodu) {
        classlist.value = {right: "0", top: (zonggaodu - 20) + "px"}
      } else {
        classlist.value = {right: "0", top: (y.value-20) + "px"}
      }
    } else {
      if (y.value < 0) {
        classlist.value = {left: "0", top: "0"}
      } else if (y.value > zonggaodu) {
        classlist.value = {left: "0", top: (zonggaodu - 20) + "px"}
      } else {
        classlist.value = {left: "0", top: (y.value-20) + "px"}
      }
    }
    // 上面就是我写的靠边判断
    // 取消监听
    document.onmouseup = null
    document.onmousemove = null
  }
}