JS——事件冒泡（1）

来源：互联网发布：淘宝商城怎么开店编辑：程序博客网时间：2024/06/06 18:12

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#d1 {width: 200px;height: 200px;background: blue;}#d2 {width: 150px;height: 150px;background: green;}#d3 {width: 100px;height: 100px;background: red;}</style></head><body><div id="d1"><div id="d2"><div id="d3"></div></div></div><script>d1.onclick = function() {alert(this.id);}d2.onclick = function() {alert(this.id);}d3.onclick = function() {alert(this.id);}</script></body></html>

--------------------------------------------------------------------------

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#d1 {width: 200px;height: 200px;background: blue;}#d2 {width: 150px;height: 150px;background: green;}#d3 {width: 100px;height: 100px;background: red;}</style></head><body><div id="d1"><div id="d2"><div id="d3"></div></div></div><script>//事件冒泡 d1.onclick = function(e) {alert(this.id);e.stopPropagation();}d2.onclick = function(e) {alert(this.id);e.stopPropagation();}d3.onclick = function(e) {alert(this.id);e.stopPropagation();}</script></body></html>

阅读全文

0 0