<html>
<head>
<title>无标题文档</title>
<script language="JavaScript1.2" type="text/javascript">
function opTab(event) {
var mnu = document.getElementById("menubar");
var arrdiv = document.getElementById("arrow");
var arrtxt = document.getElementById("arr"); var mnu2 = document.getElementById("menubar2");
var arrdiv2 = document.getElementById("arrow2");
var arrtxt2 = document.getElementById("arr2");
if ((mnu.style.display != "block") || (mnu.style.display == "")) {
mnu.style.display = "block";
arrdiv.style.left = mnu.offsetWidth + "px"; mnu2.style.display = "block";
mnu2.style.width = "750px";
arrdiv2.style.left = "220px";
arrdiv2.style.top = "160px";
arrdiv2.style.width = "750px";
}
event.cancelBubble = true;
}
function func() {
document.getElementById("menubar").style.display = "none";
document.getElementById("arrow").style.left = "0px";
document.getElementById("menubar2").style.display = "none";
document.getElementById("arrow2").style.left = "0px";
document.getElementById("arrow2").style.width = "970px";
document.getElementById("arrow2").style.left = "0px";
document.getElementById("arrow2").style.top = "0px";
}
function outM(event) {
setInterval("func()", 4000);
}
</script>
<style type="text/css">
#menubar
{
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: #7C6F57;
font-weight: 700;
z-index: 5;
background-repeat: repeat-y;
}
.pulltab
{
position: absolute;
top: 0px;
left: 0px;
height: 600px;
width: 10px;
font-size: 10px;
z-index: 5;
background-color: #666;
}
#menubar2
{
position: absolute;
top: 0px;
left: 220px;
display: none;
background-color: #EDF6FF;
font-weight: 700;
z-index: 5;
background-repeat: repeat-y;
border: solid 1px #AABCE0;
}
.pulltab2
{
background-color: #666666;
height: 10px;
left: 10px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
}
</style>
</head>
<body>
<div id="nav">
<div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
</div>
<div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
</div>
</div>
<div id="navb">
<div id="arrow" class="pulltab" onmouseover="opTab(event)">
</div>
<div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
</div>
</div>
<div style="position: absolute; left: 10px; top: 10px; z-index:0;">
主体部分
</div>
</body>
</html>
<head>
<title>无标题文档</title>
<script language="JavaScript1.2" type="text/javascript">
function opTab(event) {
var mnu = document.getElementById("menubar");
var arrdiv = document.getElementById("arrow");
var arrtxt = document.getElementById("arr"); var mnu2 = document.getElementById("menubar2");
var arrdiv2 = document.getElementById("arrow2");
var arrtxt2 = document.getElementById("arr2");
if ((mnu.style.display != "block") || (mnu.style.display == "")) {
mnu.style.display = "block";
arrdiv.style.left = mnu.offsetWidth + "px"; mnu2.style.display = "block";
mnu2.style.width = "750px";
arrdiv2.style.left = "220px";
arrdiv2.style.top = "160px";
arrdiv2.style.width = "750px";
}
event.cancelBubble = true;
}
function func() {
document.getElementById("menubar").style.display = "none";
document.getElementById("arrow").style.left = "0px";
document.getElementById("menubar2").style.display = "none";
document.getElementById("arrow2").style.left = "0px";
document.getElementById("arrow2").style.width = "970px";
document.getElementById("arrow2").style.left = "0px";
document.getElementById("arrow2").style.top = "0px";
}
function outM(event) {
setInterval("func()", 4000);
}
</script>
<style type="text/css">
#menubar
{
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: #7C6F57;
font-weight: 700;
z-index: 5;
background-repeat: repeat-y;
}
.pulltab
{
position: absolute;
top: 0px;
left: 0px;
height: 600px;
width: 10px;
font-size: 10px;
z-index: 5;
background-color: #666;
}
#menubar2
{
position: absolute;
top: 0px;
left: 220px;
display: none;
background-color: #EDF6FF;
font-weight: 700;
z-index: 5;
background-repeat: repeat-y;
border: solid 1px #AABCE0;
}
.pulltab2
{
background-color: #666666;
height: 10px;
left: 10px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
}
</style>
</head>
<body>
<div id="nav">
<div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
</div>
<div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
</div>
</div>
<div id="navb">
<div id="arrow" class="pulltab" onmouseover="opTab(event)">
</div>
<div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
</div>
</div>
<div style="position: absolute; left: 10px; top: 10px; z-index:0;">
主体部分
</div>
</body>
</html>
你可以在事件响应后,判断一下事件源是不是你要的target即可
另外,好像ajax里面在处理事件时由一个方法可以event蔓延的
qq:370407106
function $(id){return document.getElementById(id); }
function onmouseout_start(theEvent, controlId) {
if (theEvent) {
var browser = navigator.userAgent; //取得浏览器属性
if (browser.indexOf("Firefox") > 0) { //如果是Firefox
if ($(controlId).compareDocumentPosition(theEvent.relatedTarget)) { //如果是子元素
return; //结束函式
}
}
if (browser.indexOf("MSIE") > 0) { //如果是IE
if ($(controlId).contains(theEvent.toElement)) { //如果是子元素
return; //结束函式
}
}
onmouseout 时执行的Function
}
}
郁闷啊