Html事件冒泡
2018-06-24 01:56:23来源:未知 阅读 ()
原以为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://en.wikipedia.org/wiki/Event_bubbling、http://javascript.info/bubbling-and-capturing
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:【HTML基础】常用基础标签
下一篇:【HTML基础】表格和表单
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash