在mouseout与mouseover的冒泡问题上，相信有很多朋友都遇到过。今天这里就总结一下
关于mouseover和mouseout冒泡问题的解决方案：
首先，看下event.relatedTarget的用法。
relatedTarget
事件属性返回与事件的目标节点相关的节点。
relatedTarget不支持IE。对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
对于其他类型的事件来说，这个属性没有用。
<div id=‘but_temp‘><a href=‘#‘>
这里是文字
</a>
<div>
第二方收复失地还
<br>sdfsjdlfsdjlfksdjlfksjdflk
<br>
<div>
第三层第三层第三层第三层第三层第三层
<br>
第三层第三层第三层第三层第三层第三层第三层
</div>
<br>
</div>
</div>
var d1 = document.getElementById(‘but_temp‘);
d1.onmouseover = mouseover_x
d1.onmouseout = mouseout_x
function mouseover_x ( ae ){
var e = window.event || ae
var s = e.fromElement || e.relatedTarget
if( document.all ){
if( !(s == this || this.contains(s)) ){
alert("IE: 你in 了！");
}
}else{
var res= this.compareDocumentPosition(s)
if( !(s == this || res == 20 || res == 0 ) ){
alert("FF: 你in 了 ！");
}
}
}
function mouseout_x( ae ){
var e = window.event || ae;
var s = e.toElement || e.relatedTarget;
//var temp = document.getElementById(‘but_temp‘);
if(document.all){
if( !this.contains(s) ){
alert(‘IE: 你out 了‘);
}
}else{
var res= this.compareDocumentPosition(s)
if( ! ( res == 20 || res == 0) ){
alert(‘FF: 你out 了‘);
}
}
}
今天发现JQ中关于这个问题,已经有了一个好的解决办法了.呵呵,jquery中定义了一种事件叫做"mouseleave",用这个事件做事件句柄的话,就可以解决这个问题了.越来越发现jquery是个好东西了. 方案三:
<!DOCTYPE html>
<html>
<head>
<title>无标题页</title>
<script type="text/javascript" src="http://sy.zgsapt.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#numd").bind("mouseleave", function() {
document.getElementById(‘keybored‘).style.display = ‘none‘;
document.getElementById(‘Nm‘).blur();
});
$("#Nm").focus(function() {
document.getElementById(‘keybored‘).style.display = ‘‘;
});
});
</script>
</head>
<body>
<ul>
<li>
<input />
<div>
</div>
</li>
</ul>
<input id="hid" type="text" value="" style="display: none" />
<span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">
<input type="text" id="Nm" name="Nm" value="" />
<div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"
id="keybored">
<input type="button" value="1" onclick="document.getElementById(‘Nm‘).value+=this.value;" />
</div>
</span>
</body>
</html>
实现这种效果很简单了
onmouseout,mouseover经过子元素也触发的问题解决方案
时间： 2024-08-08 17:26:16