JS如何阻止事件冒泡
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS如何阻止事件冒泡相关的知识，希望对你有一定的参考价值。
<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分。急急急
代码如下:
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;
参考技术A
要想达到你个效果，只需要在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";
参考技术B javascript禁止冒泡可以使用事件的 .stopPropagation()方法，该方法可以完全阻止事件冒泡。 参考技术C <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,期待更高明的版本本回答被提问者采纳 参考技术D 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();
以上是关于JS如何阻止事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章