中文输入法触发mouseleave事件问题

场景

使用vue3的mouseenter和mouseleave事件来判断鼠标是否进入某个div内，进入时显示输入框，离开时隐藏

<div @mouseenter="enterBtn" @mouseleave="leaveBtn">

JS做对应的处理

// 鼠标移入按钮的处理
// 鼠标是否进入按钮，若进入，将按钮替换为输入框，通过mouseEntered控制输入框是否显示
const mouseEntered = ref(false)
function enterBtn() {
  mouseEntered.value = true
}
// 鼠标移出按钮的处理
function leaveBtn() {
  mouseEntered.value = false
}

问题

使用微软输入法输入中文时，mouseleave会随之触发，导致输入框被隐藏，无法正常输入内容

解决

Javascript提供了window.document.body.onmouseover方法，当鼠标在元素间发生移动时，触发事件

el.value = window.document.body; //声明一个变量，默认值为body
  window.document.body.onmouseover = function (event) {
    el.value = event.target; //鼠标每经过一个元素，就把该元素赋值给变量el
  }

这意味着当mouseleave被触发时，我们利用这个方法做判断，看光标是否在输入框内，如果在的话，不执行关闭输入框的操作，就解决了这个问题

定义变量和函数

// 目前鼠标所在的元素
const el = ref(null)
// 输入框元素
const inputEl = ref(null)
// 监听鼠标所在元素
function mouseOverHandler() {
  el.value = window.document.body; //声明一个变量，默认值为body
  window.document.body.onmouseover = function (event) {
    el.value = event.target; //鼠标每经过一个元素，就把该元素赋值给变量el
  }
}

在onMounted中调用监听

onMounted(() => {
  mouseOverHandler()
})

在<input>元素中添加focus事件，在输入框聚焦时同步inputEl

<input @focus="onFocus">

给inputEl赋值

function onFocus(){
    inputEl.value = el.value
}

在对于mouseleave事件的处理中，添加对于鼠标所在元素的判断

// 鼠标移入按钮的处理
// 鼠标是否进入按钮，若进入，将按钮替换为输入框，通过mouseEntered控制输入框是否显示
const mouseEntered = ref(false)
function enterBtn() {
  mouseEntered.value = true
}
// 鼠标移出按钮的处理
function leaveBtn() {
  // 若鼠标还在输入框内，直接return
  if(el.value === inputEl.value) {
    return
  }  
  mouseEntered.value = false
}

问题就解决了