一文带你重新学习Vue中的按键监听和鼠标监听

<template>
  <input 
    type="text" 
    v-model="inputValue"
    @keyup.enter="handleEnter"
    placeholder="按Enter键触发"
  >
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleEnter() {
      console.log('Enter键被按下', this.inputValue)
      // 在这里处理Enter键按下的逻辑
    }
  }
}
</script>

<template>
  <input 
    type="text" 
    v-model="inputValue"
    @keyup="checkEnter"
    placeholder="按Enter键触发"
  >
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    checkEnter(event) {
      if (event.key === 'Enter') {
        console.log('Enter键被按下', this.inputValue)
        // 在这里处理Enter键按下的逻辑
      }
    }
  }
}
</script>

<my-component @keyup.enter.native="handleEnter" />

<my-component @keyup.enter="handleEnter" />

<template>
  <div>
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('keyup', this.handleGlobalKeyUp)
  },
  beforeDestroy() {
    window.removeEventListener('keyup', this.handleGlobalKeyUp)
  },
  methods: {
    handleGlobalKeyUp(event) {
      if (event.key === 'Enter') {
        console.log('全局Enter键被按下')
        // 在这里处理全局Enter键按下的逻辑
      }
    }
  }
}
</script>

<template>
  <div 
    @click="handleClick"          <!-- 单击 -->
    @dblclick="handleDoubleClick"  <!-- 双击 -->
    @mousedown="handleMouseDown"   <!-- 鼠标按下 -->
    @mouseup="handleMouseUp"      <!-- 鼠标释放 -->
    @mousemove="handleMouseMove"  <!-- 鼠标移动 -->
    @mouseover="handleMouseOver"  <!-- 鼠标移入 -->
    @mouseout="handleMouseOut"    <!-- 鼠标移出 -->
    @mouseenter="handleMouseEnter" <!-- 鼠标进入（不冒泡） -->
    @mouseleave="handleMouseLeave" <!-- 鼠标离开（不冒泡） -->
    @contextmenu="handleContextMenu" <!-- 右键菜单 -->
  >
    鼠标事件区域
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('单击事件', event)
    },
    handleDoubleClick(event) {
      console.log('双击事件', event)
    },
    // 其他事件处理函数...
  }
}
</script>

<template>
  <div>
    <!-- 阻止默认行为 -->
    <a href="#" rel="external nofollow"  @click.prevent="handleClick">阻止默认跳转</a>
    
    <!-- 阻止事件冒泡 -->
    <div @click="outerClick">
      <div @click.stop="innerClick">点击我不会冒泡到外层</div>
    </div>
    
    <!-- 事件只触发一次 -->
    <button @click.once="handleOnceClick">只会触发一次</button>
    
    <!-- 左/中/右键点击 -->
    <div @click.left="leftClick">左键点击</div>
    <div @click.middle="middleClick">中键点击</div>
    <div @click.right="rightClick">右键点击</div>
    
    <!-- 串联修饰符 -->
    <button @click.stop.prevent="handleClick">阻止冒泡和默认行为</button>
  </div>
</template>

methods: {
  handleMouseDown(event) {
    // 0: 左键, 1: 中键, 2: 右键
    console.log('按下的按键:', event.button)
    
    // 检测组合键
    if (event.ctrlKey) console.log('按下了Ctrl键')
    if (event.shiftKey) console.log('按下了Shift键')
    if (event.altKey) console.log('按下了Alt键')
    if (event.metaKey) console.log('按下了Meta键(Command键)')
  }
}

methods: {
  handleMouseMove(event) {
    // 相对于浏览器窗口的坐标
    console.log('clientX:', event.clientX, 'clientY:', event.clientY)
    
    // 相对于文档的坐标
    console.log('pageX:', event.pageX, 'pageY:', event.pageY)
    
    // 相对于事件元素的坐标
    console.log('offsetX:', event.offsetX, 'offsetY:', event.offsetY)
    
    // 相对于屏幕的坐标
    console.log('screenX:', event.screenX, 'screenY:', event.screenY)
  }
}

// 全局注册
Vue.directive('mouse-tooltip', {
  bind(el, binding) {
    el.addEventListener('mouseenter', () => {
      // 显示工具提示逻辑
      console.log('鼠标进入', binding.value)
    })
    el.addEventListener('mouseleave', () => {
      // 隐藏工具提示逻辑
      console.log('鼠标离开')
    })
  }
})

// 使用
<div v-mouse-tooltip="'提示内容'">悬停我显示提示</div>

<template>
  <div 
    @mousedown="startDrag"
    @mousemove="handleDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
  >
    可拖拽区域
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startDrag(event) {
      this.isDragging = true
      this.startX = event.clientX
      this.startY = event.clientY
    },
    handleDrag(event) {
      if (!this.isDragging) return
      const dx = event.clientX - this.startX
      const dy = event.clientY - this.startY
      console.log(`拖拽距离: x=${dx}, y=${dy}`)
    },
    endDrag() {
      this.isDragging = false
    }
  }
}
</script>

import { debounce } from 'lodash'

methods: {
  handleMouseMove: debounce(function(event) {
    // 防抖处理后的函数
  }, 100)
}