层触发事件

<!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>

解决方案 »

  1.   

    <span>也属于<div>区域内..如果是从<div>外直接进入<span>,也应该触发aa而当鼠标在<div>之内而又不在<span>之内时,此时进入<span>不触发aa很拗口...简单点说,效果就好像<div>本身就没有包含<span>一样,
      

  2.   

    只要在span里加入
    onmouseover="window.event.cancelBubble=true"
    onmouseout="window.event.cancelBubble=true"
    就可以了:
    cancelBubble:设置或获取当前事件是否要在事件句柄中向上冒泡。<!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" onmouseover="window.event.cancelBubble=true" onmouseout="window.event.cancelBubble=true">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()//鼠标移入span里不执行
    {
    document.getElementById("txt").value="鼠标在div里";
    }
    function bb()//鼠标从span里移出不执行
    {
    document.getElementById("txt").value="鼠标在div外";
    }</script>
      

  3.   

    <span id="span1" onmouseover="window.event.cancelBubble=true" onmouseout="window.event.cancelBubble=true">
    只是将<span>的onmouseover和onmouseout事件不传导到<div>上,跟<div>自身的事件没关系...
    如将上面代码换成下面:
    可以看到从红色区域进入到蓝色区域(或从蓝色区域进入红色区域)都是先执行了bb,再执行了aa,
    而本意是不执行任何函数.
    之所以文本框里没变化,是因为先执行了bb再执行aa,速度过快,看不出文本框的变化,其实是执行了的.<!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" onmouseover="window.event.cancelBubble=true" onmouseout="window.event.cancelBubble=true">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()//鼠标移入span里不执行
    {
    //document.getElementById("txt").value="鼠标在div里";
    alert("执行了aa");
    }
    function bb()//鼠标从span里移出不执行
    {
    //document.getElementById("txt").value="鼠标在div外";
    alert("执行了bb");
    }</script>
      

  4.   

    从红色区域进入到蓝色区域触发了div的onmouseout,从蓝色区域进入红色区域触发了div的onmouseover,你说不执行任何函数,不知道你到底要什么!引:
    可以看到从红色区域进入到蓝色区域(或从蓝色区域进入红色区域)都是先执行了bb,再执行了aa
    ------------
    没这回事,至少IE测试通过,从红色区域进入到蓝色区域执行bb,从蓝色区域进入红色区域执行aa
      

  5.   

    IE6上确实是从红色区域进入到蓝色区域执行bb,从蓝色区域进入红色区域执行aa,我失误忘了测
    IE7没装
    firefox下从红色区域进入到蓝色区域(或从蓝色区域进入红色区域)都是先执行了bb,再执行了aa<script type="text/javascript">
    var i =0
    document.getElementById("div1").onmouseover =aa;
    document.getElementById("div1").onmouseout = bb;function aa()//鼠标移入span里不执行
    {
    i++;
    document.getElementById("txt").value=i;
    //alert("执行了aa");
    }
    function bb()//鼠标从span里移出不执行
    {
    i++;
    document.getElementById("txt").value=i;
    //alert("执行了bb");
    }</script>
    --
    可能是我没说明白,要的效果如下...
    1 当没有span的时,页面只有个100x100的红色div区域,当进出这个红色区域会发生事件,但在这个红色区域"内移动"(这里是关键)是"不会触发任何事件"的.2 现在给页面加上一个20x20的蓝色span区域后,我们在原红色div区域"内移动"变成会"产生事件"了(原因是span覆盖了一部分div,此时无论是我们从span内过渡到div内,还是从div内过渡到span内,都要产生事件),而因div包含了span,这些过渡实际还是发生在100x100的范围里,我们的鼠标也一直没出div区域,这就与第1条完全的不一样,这是不愿看到的效果.3能不能弄成,即使在加了span的情况下,在那100x100的div区域内任意移动都不产生事件(屏蔽事件)
      

  6.   

    首先可以肯定你这个不能用eventbubble来解决
    以前我也遇到类似的问题，
    是关于menu的
    没有别的办法，只能瞎搞啦
    －－－－－－－－－－－－－－－－－
    我是这么做的：
    －－－－－－－－－－－－－－－－－
    事件 不直接指向 所要执行的 响应函数
    而是指向另外一个“中间”函数（就那个意思啦）这个“中间”函数再调用那个 实际的响应函数关键在于如何调用，和怎样取消调用我用settimeout来调用
    试想：
    当鼠标从div 移到到 span 上面
    这个过程所需的 时间间隔 理论上为零我们的 settimeout 是需要一定时间间隔后才执行的就是说 span 的 onmouseover 事件产生后 settimeout 的目标函数还没有执行因此，我们可以利用这个时间差 来取消那个函数的执行 （即用cleartimeout）－－－－－－－－－－－
    大概就是这个意思，其他情况类似，
    希望对你解决此类问题有用
      

  7.   

    to:ne_rush 
    你这想法确实强的!