单击和双击绑定在同一元素会发生冲突，可以用一个定时器解决。
单击启动一个300ms的定时器，300ms后执行单击操作，如果300ms内再单击（即双击），取消定时器并执行双击操作。
var timer
$(document).ready(function){
$("#btn").bind(
'dblclick': function(){
clearTimeout(timer)
//这里可以写一些双击操作
},
'click': function(){
var this_ = $(this)
clearTimeout(timer)
timer = setTimeout(function(){
//这里可以写一些单击操作
},300)
}
)
}
如果需要使用指针请注意，setTimeout 会导致指针丢失，所有要在 setTimeout 之前将指针赋值给一个新的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var timer
$(document).ready(function(){
$("p").mouseover(function(){
var this_ = $(this)
timer = setTimeout(function(){
this_.css("background-color","yellow");
},2000)
});
$("p").mouseout(function(){
clearTimeout(timer);
$(this).css("background-color","");
});
$("p").click(function(){
clearTimeout(timer);
$(this).css("background-color","green");
});
});
</script>
</head>
<body>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
</body>
</html>
参考资料：
