无需修改HTML结构，如何触发img标签的mouseover事件？

嘿，这个问题我之前也碰到过，大概率是事件冒泡或者img元素没实际接收到鼠标事件导致的。当鼠标移到img上时，事件会顺着DOM树往上传（从img→a→div），如果div也绑了mouseover，它自然会被触发；要是连img自己的mouseover都没触发，那要么是img的鼠标事件被禁用了，要么是img本身没有可hover的有效区域。

下面给你几个不用改HTML结构的解决方案：

1. 先确保img能接收鼠标事件 #

先检查下img的CSS是不是设了pointer-events: none——这个属性会让img直接忽略所有鼠标事件，把事件全传给父元素。要是有的话，改成这样：

img {
  pointer-events: auto;
}

另外还要确认img有实际尺寸，比如src属性要正确、图片能正常加载，要是img是0×0的大小，鼠标根本碰不到它，肯定触发不了事件。

2. 阻止事件冒泡，只触发img的事件 #

要是你希望鼠标在img上时，只触发img的mouseover，不触发div的，那就在img的事件处理函数里阻止事件向上冒泡：

// 获取img元素
const img = document.querySelector('div a img');
img.addEventListener('mouseover', function(e) {
  // 这里写你img悬停要执行的逻辑
  console.log('img被hover到啦');
  // 阻止事件冒泡，不让div的mouseover触发
  e.stopPropagation();
});

这样事件就不会传到div那里去，只会触发img的mouseover。

3. 检查事件绑定的时机和方式 #

有时候可能是绑定事件的时机不对——比如DOM还没加载完就绑定了，或者选择器写错了。可以用DOMContentLoaded确保DOM加载完成后再绑定：

document.addEventListener('DOMContentLoaded', function() {
  const img = document.querySelector('div a img');
  img.addEventListener('mouseover', function() {
    console.log('img的mouseover触发了');
  });
});

4. 用事件委托精准判断触发源 #

要是div也需要绑定mouseover，但你想区分是img触发的还是div本身触发的，可以在div的事件处理函数里判断事件的目标元素：

const div = document.querySelector('div');
div.addEventListener('mouseover', function(e) {
  if (e.target.tagName === 'IMG') {
    // 这是img触发的，执行对应逻辑
    console.log('通过div的事件委托触发img的逻辑');
  } else {
    // 这是div本身被hover了，执行div的逻辑
    console.log('div自己被hover到啦');
  }
});

这样不管事件怎么冒泡，都能精准区分触发源，执行对应的逻辑。

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