问题：元素<td>下有子元素<img>,但是当鼠标在img边缘处移动时，会不断的触发td的onmouseover/onmouseout事件，表现为图片不断的闪现
<html>
<body>
<table>
<tr>
<td id="td">第一行
<img id='img' />
</td>
</tr>
</table>
<script>
var td=document.getElementById('td');
var img=document.getElementById('img');
td.onmouseover=function(){ //鼠标位于td上方时显示图片
img.setAttribute('src','url.jpg');
}
td.onmouseover=function(){ //鼠标离开td时隐藏图片
img.removeAttribute('src','url.jpg');
}
<script>
</body>
<html>原因：鼠标从td（非img区域）移动到img区域时触发了td的onmouseout事件（图片隐藏），但是img位于td内，td随后仍然会铺捉到冒泡事件onmouseover（图片显示），在img边缘移动鼠标导致这两个事件发生间隔时间很短，图片就会疯狂的闪现
解决方法：
1.使用onmouseenter 和 onmouseleave事件来替代
参考：
https://blog.csdn.net/teresa502/article/details/6103458
1254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
