怎么禁止点击事件冒泡？

怎么禁止点击事件冒泡？
stopBubble(e)不起作用，依然会执行alert(2)？
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
function click_address_line(){
$("address_line").addEvent("click", function (e){
stopBubble(e);
var target=e.target;
if(target.id=="address_edit" || target.getParent().id=="address_edit" ){
alert(1);
// return; //是不是这样做的？
}
alert(2); //怎样不执行这冒泡事件
});
}
window.addEvent("domready",function(){
click_address_line();
});

function stopBubble(e){
   //如果提供了事件对象，则这是一个非IE浏览器
   if (e && e.stopPropagation ){
   e.stopPropagation();
   } else{       //否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
   }
}
</script>
<div id="address_line">
<a href="" id="address_edit">address_edit</a>
</div>

解决方案 »

  1.   

    LZ你这例子错了吧，这不是事件冒泡，你只是给外面的DIV绑定了一个click事件，然后在事件处理函数里面判断了一下事件源，你的那个注释掉的return只是停止了当前事件处理函数的运行，所以alert(2)就没有执行，这不是阻止了冒泡，事件源是a标签，等你执行你的事件处理函数的时候，事件已经冒泡到了div，所以也就没有停止冒泡一说了。想要停止事件冒泡需要在a标签的单击事件处理函数里面，也就是说你需要两个事件处理函数。以下是一个例子，不会用yui，就jquery简单写了个。<!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    </style>
    <meta charset="UTF-8" />
    </head>
    <body>
        <div id="div1">
            <a href="#" id="a1">事件会冒泡了</a>
        </div>
        <div id="div2">
            <a href="#" id="a2">事件不会冒泡</a>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $('div').click(function(){
        alert('事件冒泡了');
    });
    $('a').click(function(e){
        if(e.target.id == 'a2'){
            e.stopPropagation();
        }
    })
    </script>