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的事件冒泡和事件捕获。
来源：https://www.cnblogs.com/rongyao/p/11111428.html