演示同一個元素上單擊事件和雙擊事件的相互衝突
阿新 • • 發佈：2018-12-14
演示同一個元素上單擊事件和雙擊事件的相互衝突
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示同一個元素上單擊事件和雙擊事件的相互衝突</title> <link rel="stylesheet" type="text/css" href="body.css"> <script type="text/javascript"> var clickTimer = null; //測試單擊事件(如果一個元素中同時有單擊事件和雙擊事件的話，會存在衝突) function testOnClick() { alert("單擊事件"); } //測試單擊事件(如果一個元素中同時有單擊事件和雙擊事件的話，會存在衝突) function testOnDoublelclick() { alert("雙擊事件"); } function _click() { if (clickTimer) { window.clearTimeout(clickTimer); clickTimer = null; } clickTimer = window.setTimeout(function() { // your click process code here alert("你單擊了我"); }, 300); } function _doublelclick() { if (clickTimer) { window.clearTimeout(clickTimer); clickTimer = null; } // your click process code here alert("你雙擊了我"); } </script> </head> <body> <div align="center"> <h1>演示同一個元素上單擊事件和雙擊事件的相互衝突</h1> 衝突版： <input type="text" value="可以單擊我，也可以雙擊我，但是單擊事件和雙擊事件會有衝突" onclick="testOnClick()" ondblclick="testOnDoublelclick()"> <br> <br> 正常版<input type="text" value="可以單擊我，也可以雙擊我，解決了單擊事件和雙擊事件的衝突" onclick="_click()" ondblclick="_doublelclick()"> </div> </body> </html>