一、鼠标事件的常用方法
鼠标是计算机的一种输入设备，也是计算机显示系统纵横坐标定位的指示器，所以鼠标事件是Web开发中最常用的一类事件。常见的鼠标事件如下表所示：
| 事件名称 | 事件触发时机 |
| onclick | 单击鼠标左键时触发 |
| onfocus | 获得鼠标指针焦点触发 |
| onblur | 失去鼠标指针焦点触发 |
| onmouseover | 鼠标指针经过时触发 |
| onmouseout | 鼠标指针离开时触发 |
| onmousedown | 当按下任意鼠标按键时触发 |
| onmouseup | 当释放任意鼠标按键时触发 |
| onmousemove | 在元素内当鼠标指针移动时持续触发 |
1、禁止鼠标右击菜单
contextmenu主要控制应该何时显示上下文菜单，主要应用于程序员取消默认的上下文菜单，示例代码如下。
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
2、禁止鼠标选中
selectstart事件是鼠标开始选择文字时就会触发，如果禁止鼠标选中，需要禁止该事件的默认行为，示例代码如下。
document.addEventListener('selectstart', function (e) {
e.preventDefault();
})
二、鼠标事件对象
鼠标事件对象MouseEvent，是跟鼠标事件相关的一系列信息的集合，可以用来获取当前鼠标的位置信息，鼠标事件位置属性如下表所示。
| 位置属性（只读） | 描述 |
| clientX | 鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标） |
| clientY | 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标） |
| pageX | 鼠标指针位于文档的水平坐标（X轴坐标），IE 6~IE 8不兼容 |
| pageY | 鼠标指针位于文档的垂直坐标（Y轴坐标），IE 6~IE 8不兼容 |
| screenX | 鼠标指针位于屏幕的水平坐标（X轴坐标） |
| screenY | 鼠标指针位于屏幕的垂直坐标（Y轴坐标） |
IE 6~IE 8浏览器中不兼容pageX和pageY属性，在项目开发时需要对IE 6~IE 8浏览器进行兼容处理，示例代码如下所示。
var pageX = event.pageX || event.clientX +
(document.body.scrollLeft ||
document.documentElement.scrollLeft)
var pageY = event.pageY || event.clientY +
(document.body.scrollTop ||
document.documentElement.scrollTop)
三、案例（图片跟随鼠标移动）
案例需求：简单实现图片跟随鼠标移动的效果（不考虑兼容性）。
案例分析：需要使用鼠标指针移动事件mousemove，每次鼠标移动，都会获得最新的鼠标指针坐标，把这个x和y坐标作为图片的top和left 值就可以实现图片的移动。
1、编写代码
<style>
img { // 给img图片设置定位
position: absolute;
top: 2px;
}
</style>
<body>
<img src="images/angel.gif" alt="">// 需要移动的图片
</body>
2、编写JS逻辑代码
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX; // 获取鼠标的X坐标
var y = e.pageY; // 获取鼠标的Y坐标
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
浏览器预览效果如下图所示：
1198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
