-
传递机制
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .outer{ width: 300px; height: 300px; background-color: plum; } .center{ width: 200px; height: 200px; background-color: deepskyblue; } .inner{ width: 100px; height: 100px; background-color: deeppink; } </style> </head> <body> <!-- 事件的传递机制分为两种：冒泡传递（默认的）和捕获传递 冒泡传递 理解 鱼吐泡泡 叠加的标签都有事件 事件是会传递的 --> <!-- 水面 --> <div class="outer"> <!-- 水 --> <div class="center"> <!-- 鱼 --> <div class="inner"></div> </div> </div> <script> var outer_div = document.querySelector(".outer") var center_div = document.querySelector(".center") var inner_div = document.querySelector(".inner") outer_div.onclick = function(e){ console.log("水面") } inner_div.onclick = function(e){ console.log("鱼 吐了泡泡") // 阻止事件传递 // 是否取消冒泡传递 e.cancelBubble = true } center_div.onclick = function(e){ console.log("水") // 另外一个阻止事件传递的方式 e.stopPropagation() } </script> </body> </html>
02-25
71
71
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
