鼠标事件的类型
onclick:单击事件
ondblclick:双击
oncontextmenu:右键菜单
onmouseover:鼠标移入
onmouseout:鼠标移出
onmouseenter:鼠标移入
onmouseleave:鼠标移出
onmousedown:鼠标按下
onmouseup:鼠标抬起
onmousemove:鼠标移动
onmouseover、onmouseout与onmouseenter、onmouseleave
两者都有鼠标移入移出的作用,但是建议使用onmouseenter&onmouseleave,因为onmouseover&onmouseout在进入子级标签时会触发
鼠标的坐标位置
通过下边的属性 获取坐标位置
screenX:元素在屏幕中的x坐标
screenY:元素在屏幕中的y坐标
clientX:表示事件发生时鼠标指针在视口中的水平坐标(不包含滚动距离)
clientY:在视口中的垂直坐标
pageX:在页面中的x坐标(包含滚动距离)IE下没有此属性
pageY:在页面中的y坐标(包含滚动距离)IE下没有此属性
鼠标事件应用----拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
<style>
* {
margin: 0;
padding: 0;
}
.drag {
width: 200px;
height: 200px;
background-image: url(https://img1.baidu.com/it/u=3899598389,3740865539&fm=253&fmt=auto&app=138&f=JPEG?w=462&h=1000);
background-size: cover;
background-position: center center;
position: absolute;
}
</style>
</head>
<body>
<div class="drag"></div>
</body>
<script>
var drag = document.querySelector(".drag");
//鼠标按下事件,获取起点位置信息
drag.onmousedown = function (e1) {
var x1 = e1.clientX;
var y1 = e1.clientY;
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
//鼠标移动事件 计算差值 drag重新定位
window.onmousemove = function (e2) {
var x2 = e2.clientX;
var y2 = e2.clientY;
var l2 = l1 + (x2 - x1);
var t2 = t1 + (y2 - y1);
//边界处理
l2 = l2 < 0 ? 0 : (l2>window.innerWidth-drag.offsetWidth ? window.innerWidth-drag.offsetWidth :l2 );
t2 = t2 < 0 ? 0 : (t2>window.innerHeight-drag.offsetHeight ? window.innerHeight-drag.offsetHeight :t2 );
drag.style.left = l2 + `px`;
drag.style.top = t2 + `px`;
}
}
//当鼠标抬起时 去掉mousemove事件
drag.onmouseup = function(){
window.onmousemove = null;
}
</script>
</html>