鼠标事件执行顺序

最新推荐文章于 2022-08-25 15:43:53 发布

佛佛ง

最新推荐文章于 2022-08-25 15:43:53 发布

阅读量998

点赞数

分类专栏： jQuery学习笔记 JS

本文链接：https://blog.csdn.net/LzzMandy/article/details/98847681

版权

JS 同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

jQuery学习笔记

29 篇文章 1 订阅

订阅专栏

div元素的执行顺序：

mouseover--> mousedown-->mouseup-->click -->mouseout

input、checkbox 、select 元素执行顺序：

mouseover--> mousedown-->focus-->mouseup-->click -->mouseout-->blur

注意：先点击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>
</html>

佛佛ง

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标事件执行顺序

div元素的执行顺序：mouseover--> mousedown-->mouseup-->click -->mouseoutinput、checkbox 、select 元素执行顺序：mouseover--> mousedown-->focus-->mouseup-->click --&g...
复制链接

扫一扫