鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
【腾讯云】2核2G4M云服务器新老同享99元/年，续费同价
找梯子最重要的就是稳定，这个已经上线三年了，一直稳定没有被封过，赶紧下载备用吧！鼠标事件：
用button来区分鼠标的按键：
找梯子最重要的就是稳定，这个已经上线三年了，一直稳定没有被封过，赶紧下载备用吧！
鼠标事件：
onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。
onmousedown：事件会在鼠标按键被按下时发生。
onmouseup：事件会在松开鼠标按键时触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
/*
鼠标事件：
onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数；
onmousedown：事件会在鼠标按键被按下时发生。
onmouseup：事件会在松开鼠标按键时触发。
*/
document.onclick = function () {
console.log('click');
};
document.onmousedown = function () {
console.log('mousedown');
};
document.onmouseup = function () {
console.log('mousemove');
}
</script>
</html>onmouseover：属性在鼠标指针移动到元素上时触发。
onmouseout： 属性在鼠标指针移动到元素外时触发。
onmouseenter：属性在鼠标指针移动到元素上时触发,
onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。
onmouseleave：属性在鼠标指针移动到元素外时触发,
onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:nth-child(1) {
width: 200px;
height: 200px;
background-color: red;
}
div:nth-child(2) {
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
<script type="text/javascript">
/*
onmouseover：属性在鼠标指针移动到元素上时触发。
onmouseout： 属性在鼠标指针移动到元素外时触发。
onmouseenter：属性在鼠标指针移动到元素上时触发,
onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。
onmouseleave：属性在鼠标指针移动到元素外时触发,
onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。
*/
var div = document.getElementsByTagName('div')[0];
div.onmouseover = function () {
div.style.backgroundColor = 'blue'
};
div.onmouseout = function () {
div.style.backgroundColor = 'red'
};
var div2 = document.getElementsByTagName('div')[1];
div2.onmouseenter = function () {
div2.style.backgroundColor = 'yellow'
};
div2.onmouseleave = function () {
div2.style.backgroundColor = 'black'
}
</script>
</html>用button来区分鼠标的按键：
通过onmousedown和onmouseup来进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
/*
用button来区分鼠标的按键：
通过onmousedown和onmouseup来进行操作
*/
document.onmousedown = function (event) {
if (event.button === 0) {
console.log('左键');
} else if (event.button === 1) {
console.log('中间滚轮');
} else if (event.button === 2) {
console.log('右键');
}
};
document.onmouseup = function (event) {
if (event.button === 0) {
console.log('左键');
} else if (event.button === 1) {
console.log('中间滚轮');
} else if (event.button === 2) {
console.log('右键');
}
}
</script>
</html>div简单拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
/*
一定要绝对定位，脱离文档流才可以移动。
*/
var div = document.getElementsByTagName('div')[0];
var disX,
disY;
div.onmousedown = function (e) {
disX = e.pageX - parseInt(div.offsetLeft);
disY = e.pageY - parseInt(div.offsetTop);
document.onmousemove = function (e) {
div.style.left = e.pageX - disX + "px";
div.style.top = e.pageY - disY + "px";
};
document.onmouseup = function () {
document.onmousemove = null;
}
};
</script>
</html>
