如何实现Html事件冒泡

来源：刀刀网

原以为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>

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务