要求：点击按钮时，下拉框显示；点击页面其他部分时，下拉框消失；
1. 不靠谱代码
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #div1 {
8 width: 400px;
9 height: 300px;
10 background-color: #ccc;
11 display: none;
12 }
13 </style>
14 <script>
15 window.onload = function () {
16 var oBtn = document.getElementById("btn1");
17 var oDiv = document.getElementById("div1");
18
19 oBtn.onclick = function () {
20 oDiv.style.display = "block";
21 };
22 document.onclick = function () {
23 oDiv.style.display = "none";
24 };
25 }
26 </script>
27 </head>
28 <body>
29 <input id="btn1" type="button" value="show" />
30 <div id="div1"></div>
31 </body>
32 </html>
不靠谱原因：当点击按钮时，（1）点击事件在btn上触发并执行，此时下拉框显示；（2）事件一直向上冒泡，并遇到了定义在document上的点击事件，触发并执行，此时下拉框不显示；
2. 解决方案 --- 组织事件冒泡（event.cancelBubble = true）
1 oBtn.onclick = function (event) {
2 oDiv.style.display = "block";
3 event.cancelBubble = true;
4 };
时间： 2024-10-30 10:26:29