JS怎么阻止阻止onmouseover和onmouseout事件冒泡
下面的代码放到IE里面执行会冒泡，麻烦帮忙看下怎么了<!DOCTYPEhtml><!--PUBLIC"-//W3C//DTDXHTML1.0Transitional//E...
下面的代码放到IE里面执行会冒泡，麻烦帮忙看下怎么了
<!DOCTYPE html>
<!-- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Event for IE</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#mydiv{ width:400px; height:400px; float:left; position:absolute; top:50px; left:50px; background-color:#F90;}
#mydiv ul{ width:300px; height:300px; position:absolute; top:50px; left:50px; background-color:#F3F;}
#mydiv ul li{ width:200px; height:200px; position:absolute; top:50px; left:50px; background-color:#FF0; list-style-type:none;}
#mas1,#mas2,#mas3,#mas4{ width:300px; float:right; border:solid 1px #006633;}
#mas1{ color:#F00;}
#mas2{ color:#0C0;}
#mas3{ color:#06C;}
#mas4{ color:#0FF;}
</style>
</head>
<body>
My name is BodyElement
<div id="mydiv">My name is DivElement
<ul id="myul">My name is ListElement
<li id="myli">My name id LIElement</li>
</ul>
</div>
<div id="mas1">ToElementFather<br /></div>
<div id="mas2">FromElementFather<br /></div>
<div id="mas3">MouseToElement<br /></div>
<div id="mas4">EventName+MouseFromElement<br /></div>
<script type="text/javascript">
window.onload=init;
function init(){
var A=document.getElementById("mydiv");
var Ma=document.getElementById("mas4");
var Mb=document.getElementById("mas3");
var Mc=document.getElementById("mas2");
var Md=document.getElementById("mas1");
A.onmouseover=uevent;
A.onmouseout=uevent;
function uevent(e){
var e=e||window.event;
var Q=e.fromElement;
var S=e.toElement;
var F=Q.parentNode;
var W=S.parentNode;
if(e.type=="mouseover"){
Md.innerHTML+=W+"\<br \/\>";
Mc.innerHTML+=F+"\<br \/\>";
Mb.innerHTML+=S+"\<br \/\>";
Ma.innerHTML+="MouseOver"+"\+"+Q+"\<br \/\>";
};
if(e.type=="mouseout"){
Md.innerHTML+=W+"\<br \/\>";
Mc.innerHTML+=F+"\<br \/\>";
Mb.innerHTML+=S+"\<br \/\>";
Ma.innerHTML+="Mouseout"+"\+"+Q+"\<br \/\>";
};
};
};
</script>
</body>
</html> 展开
<!DOCTYPE html>
<!-- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Event for IE</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#mydiv{ width:400px; height:400px; float:left; position:absolute; top:50px; left:50px; background-color:#F90;}
#mydiv ul{ width:300px; height:300px; position:absolute; top:50px; left:50px; background-color:#F3F;}
#mydiv ul li{ width:200px; height:200px; position:absolute; top:50px; left:50px; background-color:#FF0; list-style-type:none;}
#mas1,#mas2,#mas3,#mas4{ width:300px; float:right; border:solid 1px #006633;}
#mas1{ color:#F00;}
#mas2{ color:#0C0;}
#mas3{ color:#06C;}
#mas4{ color:#0FF;}
</style>
</head>
<body>
My name is BodyElement
<div id="mydiv">My name is DivElement
<ul id="myul">My name is ListElement
<li id="myli">My name id LIElement</li>
</ul>
</div>
<div id="mas1">ToElementFather<br /></div>
<div id="mas2">FromElementFather<br /></div>
<div id="mas3">MouseToElement<br /></div>
<div id="mas4">EventName+MouseFromElement<br /></div>
<script type="text/javascript">
window.onload=init;
function init(){
var A=document.getElementById("mydiv");
var Ma=document.getElementById("mas4");
var Mb=document.getElementById("mas3");
var Mc=document.getElementById("mas2");
var Md=document.getElementById("mas1");
A.onmouseover=uevent;
A.onmouseout=uevent;
function uevent(e){
var e=e||window.event;
var Q=e.fromElement;
var S=e.toElement;
var F=Q.parentNode;
var W=S.parentNode;
if(e.type=="mouseover"){
Md.innerHTML+=W+"\<br \/\>";
Mc.innerHTML+=F+"\<br \/\>";
Mb.innerHTML+=S+"\<br \/\>";
Ma.innerHTML+="MouseOver"+"\+"+Q+"\<br \/\>";
};
if(e.type=="mouseout"){
Md.innerHTML+=W+"\<br \/\>";
Mc.innerHTML+=F+"\<br \/\>";
Mb.innerHTML+=S+"\<br \/\>";
Ma.innerHTML+="Mouseout"+"\+"+Q+"\<br \/\>";
};
};
};
</script>
</body>
</html> 展开
1个回答
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
