鼠标事件
一 概念
- 鼠标事件
```html
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标移开
oncontextmenu：鼠标右键
```
- 事件参数ev
```html
ev.clientX：点击点X坐标
ev.clientY：点击点Y坐标
```二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: orange;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// 双击
div.ondblclick = function () {
console.log("双击了");
}
// 鼠标按下
div.onmousedown = function () {
console.log("按下");
}
// 鼠标抬起
div.onmouseup = function () {
console.log("抬起");
}
// 鼠标移动
div.onmousemove = function (ev) {
// 鼠标在页面中的位置
console.log("x的坐标:", ev.clientX);
console.log("y的坐标:", ev.clientY);
console.log("移动");
}
</script>
</html>
