10-05 11:09 阅读 91

关注

鼠标的单击双击滚轮事件

单击双击

先看看单击双击事件

1. 单击

   window.onclick = () => {
       console.log('单击')
   }复制代码

2. 双击

   window.ondblclick = () => {
     console.log('双击')
   }复制代码

3. 但是当我们双击的时候发现单击事件也在触发，那应该怎么办呢？

• 首先要给单击事件做延迟，双击事件是两次间隔在300毫秒之内算双击

• 每次单击和双击前需要清理延时器

    ```
    let timeId = null
    window.onclick = () => {
      clearTimeout(timeId)
      timeId = setTimeout(() => {
        console.log('单击')
      }, 300)
    }
    window.ondblclick = () => {
      clearTimeout(timeId)
      console.log('双击')
    }
    ```复制代码

右击

1. 右击事件是oncontextmenu每次右击都会触发鼠标的默认事件，e.preventDefault()是阻止默认事件，阻止事件冒泡是e.stopPropagation()

2. window.oncontextmenu = (e) => {
     e.preventDefault()
     console.log('右击')
   }复制代码

鼠标滚轮事件

window.onmousewheel = (e) => {
  // console.log(e.wheelDelta)
  if (e.wheelDelta > 0) {
    console.log('鼠标向下滚动')
  }
  if (e.wheelDelta < 0) {
    console.log('鼠标向上滚动')
  }
}复制代码

键盘按键+滚轮事件

window.onmousewheel = (e) => {
  if (!e.ctrlKey && !e.metaKey) return
  if (e.wheelDelta > 0) {
    console.log('鼠标向下滚动')
  }
  if (e.wheelDelta < 0) {
    console.log('鼠标向上滚动')
  }
}

作者：JoyZ
链接：https://juejin.cn/post/7015389939751714829