常用鼠标事件
1.禁止鼠标右键菜单
contextmenu 主要控制何时显示上下文菜单,主要用于取消默认的上下文菜单
代码
//禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();//阻止默认行为
})
2.禁止鼠标选中
代码
//禁止选中文字
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
鼠标事件对象
event对象代表事件的状态,跟事件相关的一系列信息的集合,主要时鼠标事件对象MouseEvent和KeyBoardEvent
代码
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
<style>
body {
height: 3000px;
}
</style>
</head>
<body>
<script>
document.addEventListener('click', function(e) {
//1.client 鼠标在可视区域的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('------------');
//2.page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('------------');
//3.screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
console.log('------------');
})
</script>
</body>
</html>
鼠标事件汇总
onclick:鼠标点击时
onblur:失去焦点时
onmousedown:鼠标按钮按下
onmouseup:鼠标按钮抬起
ondblclick:鼠标左,右键双击
mouseover:鼠标移动到上方
onmouseout:鼠标从上方移出
onmousemove:鼠标在上方移动
mouseenter和mouseover的区别
- 当鼠标移动到元素上时就会触发mouseenter事件
- mouseover鼠标经过自身盒子会触发,经过子盒子也会触发
- mouseenter只有经过自身盒子会触发,经过子盒子不会
- 原因:mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡