html元素雙擊事件觸發機制猜測及疑惑

時間 2019-12-13

標籤 html 元素雙擊事件觸發機制猜測疑惑欄目 HTML 简体版

原文原文鏈接

今天有個同事遇到一個奇怪的問題，我照着他的代碼作了一些簡化寫了這個demojavascript

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <style type="text/css">
 5         div{position: absolute;top: 0;left: 0;height: 50px}
 6         #back{background-color: blue;left: 20px;width: 200px;z-index: 0}
 7         #front{background-color: green;top:10px;width: 100px;z-index: 1}
 8     </style>
 9 </head>
10 <body>
11     <div id="back"></div>
12     <div id="front"></div>
13     <script type="text/javascript">
14         document.getElementById("back").addEventListener("click", function () {
15             console.log("back clicked");
16         })
17         document.getElementById("front").addEventListener("click", function () {
18             console.log("front clicked");
19             this.setAttribute("style", "z-index:0");
20             document.getElementById("back").setAttribute("style", "z-index:1");
21         })
22         document.getElementById("back").addEventListener("dblclick", function () {
23             console.log("back double clicked");
24         })
25         document.getElementById("front").addEventListener("dblclick", function () {
26             console.log("front double clicked");
27         })
28     </script>
29 </body>
30 </html>

代碼的邏輯大體是這樣的：css

首先，頁面中綠色方塊爲front，藍色方塊爲back。系統的需求是，在綠色方塊上單擊時，切換兩個方塊覆蓋方式（也就是點擊front後back會跑到front前面）。同時，還須要在雙擊藍色方塊時實現另外一個功能邏輯。html

因而這哥們很天然了寫了相似上面的代碼就提交了。沒多久，測試MM提了一個bug：「雙擊綠色方塊時，不該觸發雙擊藍色方塊的邏輯」。java

後來我本身測了一下，果真如測試MM所說，當雙擊綠色和藍色方塊重疊的區域時，控制檯會打印出這樣的log：瀏覽器

瀏覽器會先觸發front click，而後是back click，再而後竟然是back double click。按理說，在back上面只點擊了一次，應該不觸發double click纔對，畢竟第一次click是在front上觸發的。微信

因此，我大膽猜測，瀏覽器自己並不會去斷定鼠標是否觸發雙擊事件，雙擊事件是由操做系統直接分發給瀏覽器的。當瀏覽器收到操做系統發來的雙擊消息時，直接根據該雙擊事件中的座標去頁面中找命中的元素，並在這個元素上觸發js中的雙擊事件。測試

操做系統在判斷是否發生雙擊時，並不知道第一次click和第二次click的目標不是同一個元素，因此只要兩次click的間隔足夠短就認爲構成雙擊事件。而瀏覽器在收到操做系統發來的雙擊事件時，並無去檢測此次雙擊是由那兩次單擊所產生，而是直接根據雙擊事件的座標信息將這個事件分發到相應的html元素上了。this

爲驗證這個猜測，我又寫了一個demospa

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <style type="text/css">
 5         body{transition:padding-left 8s linear;padding-left: 0}
 6         div{width: 10px;height: 200px;background-color: blue;display: inline-block;float: left;}
 7     </style>
 8 </head>
 9 <body>
10     <div id="div_00"></div>
11     <div id="div_01"></div>
12     <div id="div_02"></div>
13     <div id="div_03"></div>
14     <div id="div_04"></div>
15     <div id="div_05"></div>
16     <div id="div_06"></div>
17     <div id="div_07"></div>
18     <div id="div_08"></div>
19     <div id="div_09"></div>
20     <div id="div_10"></div>
21     <div id="div_11"></div>
22     <div id="div_12"></div>
23     <div id="div_13"></div>
24     <div id="div_14"></div>
25     <div id="div_15"></div>
26     <div id="div_16"></div>
27     <div id="div_17"></div>
28     <div id="div_18"></div>
29     <div id="div_19"></div>
30     <div id="div_20"></div>
31     <div id="div_21"></div>
32     <div id="div_22"></div>
33     <div id="div_23"></div>
34     <div id="div_24"></div>
35     <div id="div_25"></div>
36     <div id="div_26"></div>
37     <div id="div_27"></div>
38     <div id="div_28"></div>
39     <div id="div_29"></div>
40     <script type="text/javascript">
41         var divs = document.getElementsByTagName("div");
42         for(var i = 0, length = divs.length; i < length; i++){
43             divs[i].addEventListener("click", function () {
44                 console.log("clicked", this.id);
45             });
46             divs[i].addEventListener("dblclick", function () {
47                 console.log("double clicked", this.id);
48             });
49         }
50 
51         setTimeout(function(){
52             document.body.setAttribute("style", "padding-left:300px");
53         }, 1000);
54     </script>
55 </body>
56 </html>