mousemove事件绑定父div时如何让target始终为父元素而非子元素

原因说明 #

e.target指向的是实际触发事件的最内层DOM元素，鼠标移动到子div上时，子元素是事件的实际触发源，因此target会变为子元素。

可用解决方案 #

方案1：使用currentTarget属性（首选） #

e.currentTarget永远指向绑定事件监听器的元素，也就是你绑定了mousemove的父div，无需修改HTML结构或样式，直接修改事件处理函数即可：

function handleShowElement(e){
  console.log(e.currentTarget) // 始终输出父div元素
}

方案2：禁用子元素的鼠标事件 #

如果子元素本身不需要响应任何鼠标交互（点击、hover等），可以给子元素添加CSS属性pointer-events: none，这样子元素不会拦截任何鼠标事件，事件触发源会直接落到父div上：

#child {
  pointer-events: none;
}

注意：该方案会导致子元素自身的所有鼠标相关事件失效，仅适合子元素不需要交互的场景。

方案3：直接引用父元素实例 #

提前获取父元素的DOM引用，在事件处理函数中直接使用该引用即可，不受target变化影响：

const parentEl = document.getElementById('parent')
function handleShowElement(e){
  console.log(parentEl)
}

内容的提问来源于stack exchange，提问作者Denis Coder