鼠标的单击事件是鼠标点击一次触发的事件(click);双击事件是两次的单击事件.
如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件，当在这个DOM对象上发生双击事件时，第一次点击（click）会 触发一次单击（click）事件，第二次点击（连续的）也会触发双击（dblclick）事件，还是会触发单击（click）事件（IE7与 firefox）。为了保证双击时不触发单击事件,解决办法,给单击事件添加一个计时器,当单击事件还没有触发时,取消这个事件,最后就只有双击事件的内容触发了.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>鼠标双击时不触发鼠标单击</title>
<style type="text/css">
#eventDiv{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="eventDiv">
</div>
</body>
<script type="text/javascript">
//1,单击事件 onclick
var timer;
eventDiv.onclick = function(){
//setTimeout 计时器(延时器)
clearTimeout(timer);//清除第一次的单击事件
//500毫秒之后运行点击事件
timer = setTimeout(function(){
eventDiv.style.background = "blue";
console.log("单击");
},500);
}
//2,双击事件
eventDiv.ondblclick = function(){
clearTimeout(timer);//清除第二次的单击事件
eventDiv.style.background = "yellow";
console.log("双击");
}
</script>
</html>
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
