1. 禁止选中文字和禁止右键菜单
1.1 禁止鼠标右键菜单
contextmenu事件：鼠标右键菜单事件。主要控制应该何时显示上下文菜单（右键菜单），主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {e.preventDefault();
})
1.2 禁止鼠标选中（selectstart 事件：鼠标选中事件，用于界面文字防止选中）
document.addEventListener('selectstart', function(e) {e.preventDefault();
})
代码：
<body>测试<script>// 1. contextmenu 我们可以禁用右键菜单document.addEventListener('contextmenu', function(e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener('selectstart', function(e) {e.preventDefault();})</script>
</body>
2. 鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。
现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。
如下是MouseEvent鼠标事件对象的常用属性：
3. 获取鼠标在页面的坐标
一会我们要处理的案例，需要获取鼠标在界面上的坐标，所以现在我们来看一下如何获取，代码如下：
<script>// 鼠标事件对象 MouseEventdocument.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>
4. 案例：跟随鼠标的天使
案例效果： 下图中的图片，跟着鼠标一起移动
案例分析：
- 鼠标不断的移动，使用鼠标移动事件： mousemove
- 在页面中移动，给document注册事件
- 图片要移动距离，而且不占位置，我们使用绝对定位即可
- 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
案例代码：
<img src="images/20191201104202949.jpg" alt=""><script>var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {// 1. mousemove只要我们鼠标移动1px 就会触发这个事件// 2. 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， // 把这个x和y坐标做为图片的top和left 值就可以移动图片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';});</script>
本文链接：https://my.lmcjl.com/post/989.html
展开阅读全文
4 评论