正文
js 冒泡事件的处理
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
onMouseOver 和 onMouseOut事件冒泡
当事件在某一DOM元素被触发时，例如用户在某个节点上点击鼠标，事件将跟随着该节点继承的各个父节点冒泡穿过整个DOM的节点层次，直到它遇到依附有该事件类型处理的父节点，HTML是层次结构内层的事件能够被传播到外层，我们称之为事件冒泡。
<div onclick="testClick(event);">
<table border="1">
<tr>
<td>this a td element</td>
<td id="output">nothing</td>
</tr>
</table>
</div>
当鼠标点击<td>this a td element</td>元素时，会触发testClick事件，即事件冒泡到div元素。
onMouseOut鼠标移出冒泡解决代码function d_1(obj,e)
{
var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
while(relatedTarget && relatedTarget != obj)
relatedTarget = relatedTarget.parentNode;
if(!relatedTarget)
{
obj.className="d_2_1"
}
}
function d_1(obj,e)
{
var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
while(relatedTarget && relatedTarget != obj)
relatedTarget = relatedTarget.parentNode;
if(!relatedTarget)
{
obj.className="d_2_1"
}
}
在需要移出的元素上 绑定onMouseOut="d_1(this,event)移出事件。
如：
<div class="d_2" id="d_2" onMouseOut="d_1(this,event)">
鼠标移出div.id为"d_2"里面的子元素节点时将不会触发d_1()函数，只有移出div"d_2"本身才会。
<div />
