层触发事件解决思路
日期：2014-05-16 浏览次数：20440 次
层触发事件
<!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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
div{height:100px; width:100px; background:red}
span{height:20px; width:20px; background:blue}
</style>
</head>
<body>
<div id= "div1 "> <span id= "span1 "> xxxx </span> </div>
</body>
</html>
<script type= "text/javascript ">
document.getElementById( "div1 ").onmouseover =aa;
document.getElementById( "div1 ").onmouseout = bb;
function aa()
{
alert( "1 ");
}
function bb()
{
alert( "2 ");
}
</script>
需要onmouseover和onmouseout无视蓝色 <span> 区域,而只在进出 <div> 时触发.
------解决方案--------------------
<!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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
div{height:100px; width:100px; background:red}
span{height:20px; width:20px; background:blue}
</style>
</head>
<body>
<div id= "div1 "> <span id= "span1 "> xxxx </span> </div> <br>
<input type=text id=txt value= " ">
</body>
</html>
<script type= "text/javascript ">
document.getElementById( "div1 ").onmouseover =aa;
document.getElementById( "div1 ").onmouseout = bb;
function aa()
{
if(event.toElement.tagName!= "SPAN ")
document.getElementById( "txt ").value= "鼠标在div里 ";
}
function bb()
{
document.getElementById( "txt ").value= "鼠标在div外 ";
}
</script>
------解决方案--------------------
首先可以肯定你这个不能用eventbubble来解决
以前我也遇到类似的问题，
是关于menu的
没有别的办法，只能瞎搞啦
－－－－－－－－－－－－－－－－－
我是这么做的：
－－－－－－－－－－－－－－－－－
事件 不直接指向 所要执行的 响应函数
而是指向另外一个“中间”函数（就那个意思啦）
这个“中间”函数再调用那个 实际的响应函数
关键在于如何调用，和怎样取消调用
我用settimeout来调用
试想：
当鼠标从div 移到到 span 上面
这个过程所需的 时间间隔 理论上为零
我们的 settimeout 是需要一定时间间隔后才执行的
就是说 span 的 onmouseover 事件产生后 settimeout 的目标函数还没有执行
因此，我们可以利用这个时间差 来取消那个函数的执行 （即用cleartimeout）
－－－－－－－－－－－
大概就是这个意思，其他情况类似，
希望对你解决此类问题有用。。。
<!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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
div{height:100px; width:100px; background:red}
span{height:20px; width:20px; background:blue}
</style>
</head>
<body>
<div id= "div1 "> <span id= "span1 "> xxxx </span> </div>
</body>
</html>
<script type= "text/javascript ">
document.getElementById( "div1 ").onmouseover =aa;
document.getElementById( "div1 ").onmouseout = bb;
function aa()
{
alert( "1 ");
}
function bb()
{
alert( "2 ");
}
</script>
需要onmouseover和onmouseout无视蓝色 <span> 区域,而只在进出 <div> 时触发.
------解决方案--------------------
<!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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
div{height:100px; width:100px; background:red}
span{height:20px; width:20px; background:blue}
</style>
</head>
<body>
<div id= "div1 "> <span id= "span1 "> xxxx </span> </div> <br>
<input type=text id=txt value= " ">
</body>
</html>
<script type= "text/javascript ">
document.getElementById( "div1 ").onmouseover =aa;
document.getElementById( "div1 ").onmouseout = bb;
function aa()
{
if(event.toElement.tagName!= "SPAN ")
document.getElementById( "txt ").value= "鼠标在div里 ";
}
function bb()
{
document.getElementById( "txt ").value= "鼠标在div外 ";
}
</script>
------解决方案--------------------
首先可以肯定你这个不能用eventbubble来解决
以前我也遇到类似的问题，
是关于menu的
没有别的办法，只能瞎搞啦
－－－－－－－－－－－－－－－－－
我是这么做的：
－－－－－－－－－－－－－－－－－
事件 不直接指向 所要执行的 响应函数
而是指向另外一个“中间”函数（就那个意思啦）
这个“中间”函数再调用那个 实际的响应函数
关键在于如何调用，和怎样取消调用
我用settimeout来调用
试想：
当鼠标从div 移到到 span 上面
这个过程所需的 时间间隔 理论上为零
我们的 settimeout 是需要一定时间间隔后才执行的
就是说 span 的 onmouseover 事件产生后 settimeout 的目标函数还没有执行
因此，我们可以利用这个时间差 来取消那个函数的执行 （即用cleartimeout）
－－－－－－－－－－－
大概就是这个意思，其他情况类似，
希望对你解决此类问题有用。。。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
