stopPropagation

为什么要阻止冒泡事件？

解决方案 »

  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=utf-8" />
    <title>无标题文档</title><script src='http://code.jquery.com/jquery-latest.js'></script>
    <script type="text/javascript">
    $(function(){ $('.div1,.div3').width(200).height(200);
    $('.div2,.div4').width(70).height(70).css('margin','10px 10px');
    $('div').css('border','solid 1px red');
    $('.div1,.div2,.div3').click(function(){
    alert($(this)[0].className)
    });
    $('.div4').click(function(e){
    alert($(this)[0].className)
    e.stopPropagation();
    });
    })</script>
    <style>
    </style></head><body>
    <div class='div1'>div1
    <div class='div2'>div2点我冒泡
    </div>
    </div>
    <div class='div3'>div3
    <div class='div4'>div4点我不冒泡
    </div>
    </div>
    </body>
    </html>