當一個元素同時具有單擊和雙擊事件時,雙擊時會觸發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>
