当前位置: 代码迷 >> JavaScript >> 如何禁止点击事件冒泡
  详细解决方案

如何禁止点击事件冒泡

热度:859   发布时间:2012-06-16 20:34:32.0
怎么禁止点击事件冒泡?
怎么禁止点击事件冒泡?
stopBubble(e)不起作用,依然会执行alert(2)?

HTML code

<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>




------解决方案--------------------
LZ你这例子错了吧,这不是事件冒泡,你只是给外面的DIV绑定了一个click事件,然后在事件处理函数里面判断了一下事件源,你的那个注释掉的return只是停止了当前事件处理函数的运行,所以alert(2)就没有执行,这不是阻止了冒泡,事件源是a标签,等你执行你的事件处理函数的时候,事件已经冒泡到了div,所以也就没有停止冒泡一说了。想要停止事件冒泡需要在a标签的单击事件处理函数里面,也就是说你需要两个事件处理函数。以下是一个例子,不会用yui,就jquery简单写了个。
JScript code

<!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> 
  相关解决方案