求助关于冒泡的问题


<ul onclick="foo()">
 <li><a href="#" title="">链接一</a></li>
</ul>现在函数foo()要实现的是点击里面的a标签，如何阻止这种事件冒泡呢？

解决方案 »

  1.   

    你这不叫冒泡，不知道你要是是不是这样：<ul onclick="foo(event)" style="border:1px solid #000; padding:10px;">
    <li><a href="#">test</a></li>
    </ul>
    <script type="text/javascript">
    function foo(e){
    e=e||window.event;
    var target=e.srcElement||e.target;
    target.style.backgroundColor='#f00';
    }
    </script>
      

  2.   

    关于 冒泡 问题，其实就是阻止下方的元素的事件触发，可能理解比较模糊，写一个例子说明，下面例子看看
    ID=div01的 DIV 对象包含了 li 对象，在li上的点击事件中，除了 item04 使用fun02 函数阻止 冒泡 问题没有出发 fun01 函数外，其他的li元素点击时都触发了 fun01 事件；    参考例子如下：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    *{font-family:verdana; font-size:12px;}
    div{border:1px solid red; padding:2px;}
    </style>
    <script type="text/javascript">
    function fun01(){
    alert('This is active with DIV which under the UI LI tag, this is fun01 active.');
    }function fun02(obj,evt){
    var v=obj.innerHTML;
    alert('This tag :'+ obj.tagName +' with HTML = '+v+'\n\nattend: trigger function fun01 now');
    }function fun03(obj,evt){  //stop the Bubble here
    var v=obj.innerHTML;
    var e=evt || window.event;
    if (window.event) {//for IE
    e.cancelBubble=true;
     }else{ //for FF
    e.stopPropagation();
     }
    alert('This tag :'+ obj.tagName +' with HTML = '+v+'\n\nattend: Not trigger function fun01 here, stop the Bubble now!');
    }
    </script>
    <body>
    <div id="div01" onclick="javascript:fun01();" id="type_select_class" class="selectClass">
    <div class="title">
    <span id="current_type_name">about the Bubble question.</span>
    </div>
        <ul class="class" id="menu_type_list">
            <li onclick="fun02(this,event);">item 01</li>
            <li onclick="fun02(this,event);"><b>item 02</b></li>
            <li onclick="fun02(this,event);">item 03</li>
            <li onclick="fun03(this,event);"><b>item 04 stop the Bubble here</b></li>
            <li onclick="fun02(this,event);">item 05</li>
            <li onclick="fun02(this,event);">item 06</li>
        </ul>
    </div>
    </body>
    </html>