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