常用的鼠标事件
鼠标事件
onclick //点击事件
onmouseover/onmouseout //鼠标移动到元素时触发/鼠标离开元素时触发
onmouseenter/onmouseleave //在鼠标指针移动到元素上时触发/事件在鼠标移出元素时触发
onfocus/onblur //鼠标获取焦点/失去焦点触发
onmouseup/onmousedown //鼠标按键松开时触发/鼠标按钮被按下触发
oncontextmenu //右键菜单禁用，用这个可以禁止复制
鼠标移动事件
<style>
.outer {
width: 300px;
height: 300px;
padding: 20px;
background-color: pink;
}
.inner {
width: 160px;
height: 160px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<script>
var outer = document.querySelector(\'.outer\');
var inner = document.querySelector(\'.outer\');
outer.addEventListener(\'mouseenter\', function() {
console.log(\'over\');
})
outer.addEventListener(\'mouseleave\', function() {
console.log(\'out\');
})
inner.addEventListener(\'mouseenter\', function() {
console.log(\'over\');
})
inner.addEventListener(\'mouseleave\', function() {
console.log(\'out\');
})
</script>
浏览器窗口可视区坐标
<style>
div {
height: 3000px;
}
</style>
<div>我不希望你复制</div>
<script>
document.addEventListener(\'selectstart\', function(e) {
e.preventDefault;
})
var odiv = document.querySelector(\'div\');
odiv.onclick = function(e) {
console.dir(e);
// 返回鼠标相对于浏览器窗口可视区坐标
console.log(e.clientX, e.clientY);
// 返回鼠标相对于电脑屏幕坐标
console.log(e.screenX, e.screenY);
// ie9+ 相当于文档页面
console.log(e.pageX, e.pageY);
}
</script>
mousemove
鼠标移动1px 事件触发一次
<style>
body {
height: 3000px;
}
img {
position: absolute;
top: 10px;
}
</style>
</head>
<img src="./heart.jpeg" width="120" alt="">
<script>
var pic = document.querySelector(\'img\');
// mousemove 鼠标移动1px 事件触发一次
document.addEventListener(\'mousemove\', function(e) {
var x = e.pageX;
var y = e.pageY;
// 给图片设置位置
pic.style.left = x - pic.width / 2 + \'px\';
pic.style.top = y - pic.height / 2 + \'px\';
});
</script>