[TOC] # 7.1常用的鼠标事件 | 鼠标事件 | 触发条件 | | --- | --- | | onclick | 鼠标点击左键触发 | | onmouseover | 鼠标经过触发 | | onmouseout | 鼠标离开触发 | | onfocus | 获得鼠标焦点触发 | | onblur | 失去鼠标焦点触发 | | onmousemove | 鼠标移动触发 | | onmouseup | 鼠标弹起触发 | | onmousedown | 鼠标按下触发 | ## 1.禁止鼠标右键菜单 （contextmenu） contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单 ~~~ document.addEventListener ( 'contextmenu'，function(e) { e.preventDefault() ; }) ~~~ ## 2.禁止鼠标选中( selectstart开始选中) ~~~ document.addEventListener (' selectstart'，function(e) { e.preventDefault () ; }) ~~~ # 7.2鼠标事件对象 **event**对象代表事件的状态,跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 **MouseEvent**和键盘事件对象**KeyboardEvent**。 | 鼠标事件对象 | 说明 | | --- | --- | | e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 | | e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 | | e.pageX**（重点）** | 返回鼠标相对于文档页面的X坐标IE9+支持 | | e.pageY**（重点）** | 返回鼠标相对于文档页面的Y坐标IE9+支持 | | e.screenX | 返回鼠标相对于电脑屏幕的X坐标 | | e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 | ~~~ <script> //鼠标事件对象MouseEvent 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); }) </script> ~~~ # 案例:跟随鼠标的天使 这个天使图片**一直跟随鼠标移动** ## 案例分析 ①鼠标不断的移动,使用鼠标移动事件: mousemove ②在页面中移动,给document注册事件 ③图片要移动距离,而且不占位置,我们使用绝对定位即可 ④核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标做为图片的top和left值就可以移动图片 ## 代码实验 css 样式 ~~~ <style> img { position: absolute; top: 2px; } </style> ~~~ html ~~~ <img src=" images/ angel.gif" alt=""> ~~~ js ~~~ <script> var pic = document . querySelector( 'img ' ); document. addEventL istener( ' mousemove'，function(e) { //1.mousemove只要我们鼠标移动1px就会触发这个事件 // console.log(1); // 2.核心原理: 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和1eft值 就可以移动图片 var x = e.pageX; var y = e.pageY; console.log('x坐标是'+ X,'y坐标是' + y); //3 .千万不要忘记给left和top添加px单位 pic.style.left = X -50 +'px' ; pic.style.top = y - 40 +'px' ; }); ~~~