原以为span不同于input,事件冒泡会被父级标签吞噬,写了个测试事件冒泡的demo,发现并不是想得那样。另外:event.stoppropagation()以及event.stopimmediatepropagation()并不能阻止span冒泡到a标签中,而简单粗暴的return false却可以。
<!doctype html>
<html>
<head>
<title>bubbling</title>
<style type="text/css">
* {
font-size:30px;
}
div {
border: 1px blue solid;
}
span {
border: 1px blue solid;
}
</style>
<script type="text/javascript">
function setforecolor(sender) {
sender.style.color = "red";
}
function setbgcolor(sender) {
sender.style.background = "green";
return false;
}
</script>
</head>
<body>
<div>
<span onclick="setforecolor(this)">span tag</span> in div
</div>
<br>
<div>
<input type="button" value="button" onclick="setforecolor(this)"/> in div
</div>
<br>
<a href="https://www.baidu.com" style="text-decoration:none;display:block;">
<span onclick="setforecolor(this);return false">span tag</span> in anchor
</a>
<br>
<a href="https://www.baidu.com" style="text-decoration:none;display:block;">
<span onclick="setbgcolor(this)">span tag</span> in anchor
</a>
</body>
</html>
以上就是如何实现html事件冒泡的详细内容。