當一個元素同時具有單擊和雙擊事件時,雙擊時會觸發2次單擊和1此雙擊事件。
雙擊會:先第1次單擊 ,同時觸發第2次和雙擊事件。
造成的不好影響:每次單擊事件會延遲執行。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> var id; window.onload = function () { document.getElementById('divdemo').onclick = function () { //清除的是雙擊事件的第2次單擊事件id clearTimeout(id);//這句代碼放setTimeout下面,也同樣將下面的定時器關掉。 id = setTimeout(function () {//不論單雙擊,每點擊一次就會立馬產生一個定時器id,產生的id和這個定時器執行與否(什么時候執行)沒有關系。 alert(id);//單擊操作 }, 300); //clearTimeout(id); } document.getElementById('divdemo').ondblclick = function () { //清除的是雙擊事件的第1次單擊事件id clearTimeout(id); alert(id);//雙擊操作 } } </script> </head> <body> <div id="divdemo" style="width: 400px; height: 400px; background-color: red"> </div> </body> </html>
只有單擊,
<script type="text/javascript"> var id; window.onload = function () { document.getElementById('divdemo').onclick = function () { //清除的是雙擊事件的第2次單擊事件id //clearTimeout(id);//這句代碼放setTimeout下面,也同樣將下面的定時器關掉。 id = setTimeout(function () {//不論單雙擊,每點擊一次就會立馬產生一個定時器id,產生的id和這個定時器執行與否(什么時候執行)沒有關系。 alert(id);//單擊操作 }, 300); clearTimeout(id);//只有單擊時,只能放這,才會讓單擊事件不執行 } } </script> <body> <div id="divdemo" style="width: 400px; height: 400px; background-color: red"> </div> </body>