JavaScript 常见鼠标事件
Posted 「已注销」
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 常见鼠标事件相关的知识，希望对你有一定的参考价值。
javascript 中常见的鼠标事件：
（1）鼠标按下事件(mousedown)：鼠标按钮被按下时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mousedown",function()
this.style.backgroundColor = "blue";
)
</script>
</body>
</html>
鼠标按下，背景颜色变为蓝色：
（2）鼠标抬起事件(mouseup)：鼠标按钮抬起时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mouseup",function()
this.style.backgroundColor = "orange";
)
</script>
</body>
</html> 
鼠标抬起，背景颜色变为橘色：
（3）鼠标单击事件(click)：鼠标单击时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("click",function()
this.style.width = "150px";
)
</script>
</body>
</html>
单击鼠标，宽度变为150px：
（4）鼠标双击事件(dblclick)：鼠标双击时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("dblclick",function()
console.log("鼠标双击了");
)
</script>
</body>
</html>
双击鼠标，控制台输出：
（5）鼠标移动事件(mousemove)：鼠标移动时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mousemove",function()
console.log("鼠标正在移动");
)
</script>
</body>
</html>
鼠标在元素上移动时，控制台会不断输出：
（6）鼠标悬停事件(mouseover)： 鼠标移到元素上方时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mouseover",function()
this.style.backgroundColor = "gray";
)
</script>
</body>
</html>
鼠标位于元素上方时，背景颜色变为灰色：
（7）鼠标移出事件(mouseout)：鼠标从某元素移开时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mouseout",function()
this.style.height = "150px";
)
</script>
</body>
</html>
鼠标移开时，元素的高度会变为150px：
（8）鼠标进入事件(mouseenter)：鼠标指针移动到元素上时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mouseenter",function()
console.log("鼠标进入了");
)
</script>
</body>
</html>
鼠标进入时，控制台输出：
（9）鼠标移开事件(mouseleave)：鼠标指针移出元素时触发。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box
width: 100px;
height: 100px;
background-color: rgba(7, 240, 112, 0.63);
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mouseleave",function()
console.log("鼠标离开了");
)
</script>
</body>
</html>
鼠标从元素上移开时，控制台输出：
以上是关于JavaScript 常见鼠标事件的主要内容，如果未能解决你的问题，请参考以下文章