阅读 175
鼠标的单击双击滚轮事件

鼠标的单击双击滚轮事件

单击双击

先看看单击双击事件

  1. 单击

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

    window.ondblclick = () => {
      console.log('双击')
    }
    复制代码
  3. 但是当我们双击的时候发现单击事件也在触发,那应该怎么办呢?

2021-09-30 16-04-18.gif

  • 首先要给单击事件做延迟,双击事件是两次间隔在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('鼠标向上滚动')
  }
}
复制代码

视频讲解:单击双击 右击事件 滚轮事件

文章分类
前端
文章标签