一般情况下执行顺序是从左到右。有时需要解决mousedown和click冲突的事件。下面是一个网友的解决办法:
之前做项目遇到同一个dom上要同时绑定单击和mousedown事件, 然后就发现冲突了,总是先执行mousedown事件,click时间不会被执行。因为想要click的时候必然先mousedown,所以……
后来通过setTimeout解决了此冲突,简单总结demo如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div{
width:100px;
height:100px;
background:green;
}
</style>
<body>
<div class="demo"></div>
</body>
</html>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var down=null;
var mouse=false;
$('.demo').mousedown(function(){
clearTimeout(down);
down=setTimeout(function(){
mouse=true;
console.log('鼠标按下了');
},200);
});
$('.demo').click(function(){
clearTimeout(down);//要清除down事件,否则在执行了click事件之后,会接着执行mousedown事件
if(!mouse){
console.log('被点击了');
}else{
mouse=false;
}
});
});
</script>
以下是我在Chrome里查看执行顺序时的情况。点击一下后的执行顺序。
image.png
网友评论