Html事件冒泡

最新推荐文章于 2024-04-18 16:27:30 发布

weixin_33726943

最新推荐文章于 2024-04-18 16:27:30 发布

阅读量94

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/makesense/p/7653523.html

版权

原以为span不同于input，事件冒泡会被父级标签吞噬，写了个测试事件冒泡的Demo，发现并不是想得那样。另外：event.stopPropagation()以及event.stopImmediatePropagation()并不能阻止span冒泡到a标签中，而简单粗暴的return false却可以。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Bubbling</title>
 5     <style type="text/css">
 6         * {
 7             font-size:30px;
 8         }
 9         div {
10             border: 1px blue solid;
11         }
12         span {
13             border: 1px blue solid;
14         }
15     </style>
16     <script type="text/javascript">
17         function setforeColor(sender) {
18             sender.style.color = "red";
19         }
20 
21         function setbgColor(sender) {
22             sender.style.background = "green";
23             return false;
24         }
25     </script>
26 </head>
27 <body>
28     <div>
29         <span onclick="setforeColor(this)">span tag</span> in div
30     </div>
31     <br>
32     <div>
33         <input type="button" value="Button" onclick="setforeColor(this)"/> in div
34     </div>
35     <br>
36     <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
37         <span onclick="setforeColor(this);return false">span tag</span> in anchor
38     </a>
39     <br>
40     <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
41         <span onclick="setbgColor(this)">span tag</span> in anchor
42     </a>
43 </body>
44 </html>

转载于:https://www.cnblogs.com/makesense/p/7653523.html

weixin_33726943

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html事件冒泡

原以为span不同于input，事件冒泡会被父级标签吞噬，写了个测试事件冒泡的Demo，发现并不是想得那样。另外：event.stopPropagation()以及event.stopImmediatePropagation()并不能阻止span冒泡到a标签中，而简单粗暴的return false却可以。 1 <!DOCTYPE html> 2 <html>...
复制链接

扫一扫