关于事件冒泡的一个问题

下面代码中想要让第二个ul用起来的效果与第一个ul一样
也就是想达到当触发了第二个ul中的li的mouseover事件后
再进入这个li的span时不会打断li的mouseover事件
要如何达到呢？谢谢啦<!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>
  <title> new document </title>
 </head> <body>
  <ul>
<li>123</li>
<li>123</li>
<li>123</li>
  </ul>
  <ul>
<li><span>1</span><span>2</span><span>3</span></li>
<li><span>1</span><span>2</span><span>3</span></li>
<li><span>1</span><span>2</span><span>3</span></li>
  </ul>
  <script type="text/javascript">  
var lis = document.getElementsByTagName('li');
var spans = document.getElementsByTagName('span');

for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function(e) {
this.style.border = '1px solid #999';
console.log('li over');
};

lis[i].onmouseout = function(e) {
this.style.border = '0px solid #999';
console.log('li out');
}
};

for (var i = 0; i < spans.length; i++) {
spans[i].onmouseover = function(e) {
this.style.border = '1px solid #999';
console.log('span over');
};

spans[i].onmouseout = function(e) {
this.style.border = '0px solid #999';
console.log('span out');
}
};
  </script>
 </body>
</html>

解决方案 »

  1.   

    鼠标经过第一个ul中的一个li后日志如下：
    li over
    li out鼠标经过第二个ul中的一个li并且经过其三个span后日志如下：
    li over
    li out    # 在触发span的mouseover前先触发了li的out
    span over 
    li over   # 当span的over结束后li的over被再次触发 
              # 我希望进入li和出来li都只触发一次over和out而不会被span的over打断
    span out
    li out
    span over
    li over
    span out
    li out
    span over
    li over
    span out
    li out
    li over
    li out这样可以了解打断的意思吗？谢谢啦
      

  2.   

    即使你不给span加事件处理函数 这个也会去执行的~~~。但是速度很快的~肉眼看不到的
      

  3.   

    谢谢cj205，真实情况中li的mouseover会异步请求，而三个span用来不规则背景自动长度，所以目前的效果就会移动一下就n个异步请求这样消耗有点大。有办法可以解决吗？
      

  4.   

    function stopPropagation(e){
    e = e || window.event;
    if(window.event){
    e.cancelBubble = ture;
    }else{
    e.stopPropagation();
    }
    } spans[i].onmouseover = function(e) {  
                stopPropagation(e)
                ...
            };
            
    spans[i].onmouseout = function(e) {
               stopPropagation(e);
               ...
    }
      

  5.   

    阻止冒泡我试过，效果无法达到，如果不阻止冒泡至少两个都会触发mouseover，只是span的mouseover会打断li的mouseover，如果阻止冒泡当鼠标移上span时，li压根就已经不触发了，因为事件触发的优先级span比li高
      

  6.   

    嗯 是这样的~~因为你如果直接进入span的话……
    不过话说回来~~你这需求很奇怪啊
      

  7.   

    找到解决办法了，谢谢各位参考：
    http://xuganggogo.javaeye.com/blog/538476