如何禁止点击事件冒泡-JavaSript-爱易网页

如何禁止点击事件冒泡

日期：2014-05-16　浏览次数：20479 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

如何禁止点击事件冒泡

相关资料更多>

推荐阅读更多>