JS如何阻止事件冒泡

<body><aonclick="aaa(this)"href="#">123123</a><ulid="ul"style="display:none;"><li><ah... <body>
<a onclick="aaa(this)" href="#">123123</a>
<ul id="ul" style="display:none;">
<li><a href = "#">Home</a></li>
<li><a href = "#">PC</a></li>
<li><a href = "#">music</a></li>
<li><a href = "#">I like</a></li>
</ul>
</div>
<script language = "javascript">
var ul=document.getElementById('ul')
function aaa(){
if(ul.style.display=='none'){
ul.style.display='block'
} else{
ul.style.display=='none'
cancelBubble = true;
}
}

</script>
</body>

我想做的效果就是，当点击A链接的时候，ul显示，当点击body的时候ul隐藏，我是初学者，我知道这里面有一个事件冒泡的问题，
请教各位高手，补充一下我的代码，如果可以的话，帮我注释一下我该怎么做。就可以阻止事件冒泡，谢谢。悬赏20分。急急急展开

 我来答

7个回答

#热议# 为什么有人显老，有人显年轻？

慎重还可靠灬宝贝f
推荐于2017-09-25 · TA获得超过12.9万个赞

知道大有可为答主

回答量：1.9万

采纳率：52%

帮助的人：2628万

我也去答题访问个人页

关注

展开全部

　　如果<p>是在<div>里面，那么呢，<P>有一个onclick事件，<div>也有onclick事件，为了触发<P>的点击事件时，不触发父元素的点击事件，那么就需要调用如下函数：
　　
　　代码如下:
　　function stopBubble(e){
　　if(e&&e.stopPropagation){//非IE
　　e.stopPropagation();
　　}
　　else{//IE
　　window.event.cancelBubble=true;
　　}
　　}
　　
　　
　　<a onclick=''>如果要阻止默认事件的触发，即默认的href事件，那么就需要调用如下函数：
　　
　　代码如下:
　　function stopDefault( e ) {
　　//阻止默认浏览器动作(W3C)
　　if ( e && e.preventDefault )
　　e.preventDefault();
　　//IE中阻止函数器默认动作的方式
　　else
　　window.event.returnValue = false;
　　return false;
　　}

已赞过 已踩过<

评论收起

帕霖胀谠丈54Av
2015-11-13 · TA获得超过322个赞

知道小有建树答主

回答量：193

采纳率：75%

帮助的人：100万

我也去答题访问个人页

关注

展开全部

要想达到你个效果，只需要在body上绑定一个onclick事件就可以了。

代码如下：

window.onload = function() {
    document.body.onclick = function(event) {
        //ie和w3c标准的event获取方式不同
        event = event ? event.target : window.event.srcElement;
        //此处就是利用冒泡，在body上绑定click事件
        //如果事件源是a元素，并且a元素中的html为123123，ul显示
        if(event.targetName='A' && event.innerHTML='123123') {
            document.getElementById("ul").style.display = ""; 
        } else if (e.tagName == "BODY") { 
            //如果事件源是body
            document.getElementById("ul").style.display = "none";
        }
    }
}

已赞过 已踩过<

评论收起

育知同创教育
2018-06-28 · 百度知道合伙人官方认证企业

育知同创教育

1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】

向TA提问

关注

展开全部

javascript禁止冒泡可以使用事件的 .stopPropagation()方法，该方法可以完全阻止事件冒泡。

本回答被网友采纳

已赞过已踩过<

你对这个回答的评价是？
评论收起

srleo
推荐于2017-09-22 · TA获得超过506个赞

知道小有建树答主

回答量：1002

采纳率：0%

帮助的人：752万

我也去答题访问个人页

关注

展开全部

<body style="width: 400px; height: 400px; background: #ccc;border:1px solid #000;">
    <a href="#">123123</a>
    <ul id="ul" style="display: none;background:#eee;">
        <li><a href="#">Home</a></li>
        <li><a href="#">PC</a></li>
        <li><a href="#">music</a></li>
        <li><a href="#">I like</a></li>
    </ul>

    <script>
        document.body.onclick = function(e) {
            e = e ? e.target : window.event.srcElement;
            if (e.tagName == "A" && e.innerHTML == "123123") { document.getElementById("ul").style.display = ""; }
            else if (e.tagName == "BODY") { document.getElementById("ul").style.display = "none"; }
        }
    </script>

</body>
我的能力所做出的阻止冒泡的js,期待更高明的版本


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

yugi111
2014-03-23 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

window.onload = function  () {
 
document.body.onclick = function(e) {
    e = e||window.event;
    alert("body");
}
 
document.getElementsByTagName("div")[0].onclick = function(e) {
    e = e||window.event;
    alert("div0");
    if (!!e.cancelBubble) {
        e.cancelBubble = true;
    } else if (!!e.stopPropagation) {
        e.stopPropagation();
    }
}
 
}

已赞过 已踩过<

评论收起

更多回答（5）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS如何阻止事件冒泡

其他类似问题

为你推荐：