JS-监听鼠标事件时点击元素触发鼠标事件

问题描述：
在页面挂载完成后对元素进行鼠标监听，在鼠标移入之后在元素中点击，发现触发了mouseleave事件，在查看事件对象后发现点击触发的mouseleave事件中的relatedTarget的值为null

const popDom = document.querySelector('#popDom')
popDom.addEventListener('mouseenter', () => {
  this.$emit('DetailCard', true)
  this.$store.commit('getPopShow', true)
})
popDom.addEventListener('mouseleave', (e) => {
  this.$emit('DetailCard', false)
  this.$store.commit('getPopShow', false)
})

解决问题：
根据上述可以用e.relatedTarget来判断是否是正常触发的mouseleave事件

popDom.addEventListener('mouseleave', (e) => {
  if (!e.relatedTarget) {
    return
  }
  this.$emit('DetailCard', false)
  this.$store.commit('getPopShow', false)
})