鼠标事件执行顺序
2021-04-14 本文已影响0人
Lisa_Guo
原文：https://blog.csdn.net/LzzMandy/article/details/98847681
1、div元素的执行顺序：
mouseover--> mousedown-->mouseup-->click -->mouseout
2、input、checkbox 、select 元素执行顺序：
mouseover--> mousedown-->focus-->mouseup-->click -->mouseout-->blur
3、先点击input再点击div时，整个执行顺序是：
input----mousedown-->
input----focus-->
input----mouseup-->
input----click-->
div---mousedown-->
input----blur-->
div---mouseup-->
div---click
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// div 元素执行顺序
// mouseover-->mousedown-->mouseup-->click-->mouseout
$("#div1").mouseover(function(e){
console.log("mouseover mouseover mouseover");
});
$("#div1div1").mousedown(function(e){
console.log("mousedown mousedown mousedown");
});
$("#div1").mouseup(function(e){
console.log("mouseup mouseup mouseup");
});
$("#div1").click(function(e){
console.log("click click click");
});
$("#div1").mouseout(function(e){
console.log("mouseout mouseout mouseout");
});
// input、checkbox 、select 元素执行顺序
// mouseover-->mousedown-->focus-->mouseup-->click-->mouseout-->blur
$("#input1").mouseover(function(e){
console.log("mouseover mouseover mouseover");
});
$("#input1").mousedown(function(e){
console.log("mousedown mousedown mousedown");
});
$("#input1").focus(function(e){
console.log("focus focus focus");
});
$("#input1").mouseup(function(e){
console.log("mouseup mouseup mouseup");
});
$("#input1").click(function(e){
console.log("click click click");
});
$("#input1").mouseout(function(e){
console.log("mouseout mouseout mouseout");
});
$("#input1").blur(function(e){
console.log("blur blur blur");
});
});
</script>
<style type="text/css">
#div1{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}
#input1{
width: 200px;
height: 50px;
background: yellow;
margin-bottom: 20px;
}
#select1{
width: 200px;
height: 50px;
background: yellow;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="div1">鼠标事件</div>
<input id="input1" type="text" value="aaa">
<select id="select1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
