事件触发

bb标签包含aa标签，而这两个标签都有自己的onclick事件，能不能点击aa标签时而不触发bb的onclick事件呢
<!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>
<script type="text/javascript">
function aa(){
  alert("aa");
}
function bb(){
  alert("bb");
}
</script>
</head><body>
<div id="aa" onclick="aa();" style=" position:absolute; left:100px; top:100px; width:200px; height:200px; background:#00CCFF;">
<div id="bb" onclick="bb();" style="position:absolute; width:100px; height:100px; background:#99FFFF;">
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    <!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>
    <script type="text/javascript">
    function aa(){
      alert("aa");
    }
    function bb(){
      event.cancelBubble=true;//取消冒泡
      alert("bb");
    }
    </script>
    </head><body>
    <div id="aa" onclick="aa();" style=" position:absolute; left:100px; top:100px; width:200px; height:200px; background:#00CCFF;">
    <div id="bb" onclick="bb();" style="position:absolute; width:100px; height:100px; background:#99FFFF;">
    </div>
    </div>
    </body>
      

  2.   

    L@_@K
    <!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>
    <script type="text/javascript">
    function aa(){
      alert("aa");
    }
    function bb(){
      alert("bb");
      event.cancelBubble = true;
    }
    </script>
    </head><body>
    <div id="aa" onclick="aa();" style=" position:absolute; left:100px; top:100px; width:200px; height:200px; background:#00CCFF;">
    <div id="bb" onclick="bb();" style="position:absolute; width:100px; height:100px; background:#99FFFF;">
    </div>
    </div>
    </body>
    </html>
      

  3.   


    function aa(event){
               if(event.preventDefault){
                   event.preventDefault();
               }else{
                   event.returnValue = false;
               }
               alert("aa");
             }
             function bb(event){
                   if(event.preventDefault){
                   event.preventDefault();
               }else{
                   event.returnValue = false;
               }
               event.cancelBubble =true;
               alert("bb");
             }
      

  4.   


    <div id="aa" onclick="aa(event);" style=" position:absolute; left:100px; top:100px; width:200px; height:200px; background:#00CCFF;">
    <div id="bb" onclick="bb(event);" style="position:absolute; width:100px; height:100px; background:#99FFFF;">
    </div>
    </div>
      

  5.   


    cancelBubble IE专有的，这样不行
      

  6.   


    <!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>
    <script type="text/javascript">
    function aa(){
      alert("aa");
    }
    function bb(e){
        e = e || event;
        if(window.event){//IE
         e.cancelBubble=true;//取消冒泡
        }else{//非IE
    e.stopPropagation();
        }
        alert("bb");
    }</script>
    </head><body>
    <div id="aa" onclick="aa(event);" style=" position:absolute; left:100px; top:100px; width:200px; height:200px; background:#00CCFF;">
    <div id="bb" onclick="bb(event);" style="position:absolute; width:100px; height:100px; background:#99FFFF;">
    </div>
    </div>
    </body>