“點選”改變樣式(事件源,冒泡捕獲)
阿新 • • 發佈:2018-11-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #app { min-width: 100vw; min-height: 100vh; } #app .icon{ display: inline-block; cursor: pointer; } </style> </head> <body> <div id="app"> <span class="icon">123456</span> </div> <script> const app = document.querySelector("#app") const icon = document.querySelector(".icon") app.addEventListener("click", e => { if(e.target === icon){ return; } // 非空白處才去除 border icon.style.border = "none"; }) icon.addEventListener("click", e => { // 禁止冒泡 e.stopPropagation() // 更改樣式 icon.style.border = "1px solid red"; }) </script> </body> </html>