JQ版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function () { $("p").click(function () { $(this).hide(); }); }); </script> </head> <body> <p>如果你點我，我就會消失。</p> <p>繼續點我!</p> <p>接着點我!</p> </body> </html>
JS版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>如果你點我，我就會消失。</p> <p>繼續點我!</p> <p>接着點我!</p> <script> // 使用原生js 實現點擊消失效果 window.onload = function () { var ppp = document.getElementsByTagName("p"); console.log(ppp) if (ppp.length > 0) { for (var i = 0; i < ppp.length; i++) { console.log(ppp[i]) ppp[i].addEventListener("click", function () { this.hidden = true; }); } } } </script> </body> </html>
有時間再詳細說一下js的事件冒泡和事件捕獲。