美文网首页
VUE:监听鼠标点击事件

VUE:监听鼠标点击事件

作者: 喜欢走弯路的人 | 来源:发表于2023-02-13 10:21 被阅读0次

mounted () {

    window.addEventListener('mousedown', this.handleMousedown)//监听鼠标按下

    window.addEventListener('mouseup', this.handleMouseup)//监听鼠标抬起

    window.addEventListener('keydown', this.handlekeydown)//监听键盘按下

  },

  methods: {

    // 鼠标按下事件

    handleMousedown (e) {

      if (e.button == 0) {

        console.log('鼠标左键按下')

      }

      if (e.button == 1) {

        console.log('鼠标滚动键按下')

      }

      if (e.button == 2) {

        console.log('鼠标右键按下')

      }

        console.log(e.pageX, e.pageY)// 坐标

    },

    // 鼠标抬起事件

    handleMouseup (e) {

      if (e.button == 0) {

        console.log('鼠标左键抬起')

      }

      if (e.button == 1) {

        console.log('鼠标滚动键抬起')

      }

      if (e.button == 2) {

        console.log('鼠标右键抬起')

      }

      console.log(e.pageX, e.pageY)// 坐标

    },

    // 监听键盘事件

    handlekeydown (e) {

      console.log(e)

    }

  },

相关文章

网友评论

      本文标题:VUE:监听鼠标点击事件

      本文链接:https://www.haomeiwen.com/subject/uomjkdtx.html