如何禁止点击事件冒泡

2012-06-16

怎么禁止点击事件冒泡？怎么禁止点击事件冒泡？stopBubble(e)不起作用，依然会执行alert(2)？HTML codescript

怎么禁止点击事件冒泡？
怎么禁止点击事件冒泡？
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>

热点排行

Bad Request.

JavaScript

如何禁止点击事件冒泡