当一个元素同时具有单击和双击事件时，双击时会触发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=" 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=" 400px; height: 400px; background-color: red">
</div>
</body>