• Web APIs：事件高级--鼠标事件

    禁止选中文字和禁止右键菜单

    1.禁止鼠标右键菜单

    contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

    1. document.addEventListener('contextmenu', function(e) {
    2. e.preventDefault();
    3. })

     2.禁止鼠标选中（selectstart 开始选中）

    1. document.addEventListener('selectstart', function(e) {
    2.  e.preventDefault();
    3.  })

    正常情况下：我们可以右击菜单和选中文字，但是当我们阻止了它的默认事件，它将无法右键和选中

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		选不中的文字
    9. 		<script>
    10. 			// 1.contextmenu 我们可以禁止右键菜单
    11. 			document.addEventListener('contextmenu',function(e){
    12. 				e.preventDefault();
    13. 			});
    14. 			// 2.禁止选中文字 selectstart
    15. 			document.addEventListener('selectstart',function(e){
    16. 				e.preventDefault();
    17. 			})
    18. 		</script>
    19. 	</body>
    20. </html>

    获得鼠标在页面中的坐标

    event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

     clientX就是画红色的范围

    page鼠标在页面文档的x和y坐标

    1. console.log(e.pageX)
    2. 				console.log(e.pageY)

    跟随鼠标的天使 

    让天使图片随鼠标一起动

    案例分析

    ① 鼠标不断的移动，使用鼠标移动事件： mousemove

    ② 在页面中移动，给document注册事件

    ③ 图片要移动距离，而且不占位置，我们使用绝对定位即可

    ④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的 top和left 值就可以移动图片

    现在图片是无法移动的，这是因为top:50px 而我们只不过是给了它50却没有给他px

     现在图片是能以移动了，但是在鼠标的左上角 

    这样就可以了。

    代码

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style>
    7. 			img{
    8. 				position: absolute;
    9. 			}
    10. 		</style>
    11. 	</head>
    12. 	<body>
    13. 		<img src="img/angel.gif" alt="" srcset="">
    14. 		<script>
    15. 			var pic=document.querySelector('img')
    16. 			document.addEventListener('mousemove',function(e){
    17. 				// 1.mousemove只要鼠标移动，都会触发这个事件
    18. 				var x=e.pageX;
    19. 				var y=e.pageY;
    20. 				pic.style.left=x-50+'px';
    21. 				pic.style.top=y-40+'px';
    22. 			});
    23. 		</script>
    24. 	</body>
    25. </html>
  • 相关阅读:
    Python 函数方法的类型注解
    Windows编写批处理脚本.bat启动jar文件
    从源码分析 MGR 的流控机制
    安装GPU驱动,CUDA Toolkit和配置与CUDA对应的Pytorch
    遗传算法(GA)优化的BP神经网络预测,GA-BP回归预测,多输入单输出模型。
    JSON vs. CSV vs. YAML vs. XML vs. HDF5vs. XLS：数据格式之争
    TCP/IP协议专栏——IP 详解——网络入门和工程维护必看
    四、nginx静态文件的配置
    基于分步表单的实践探索
    卷积层计算量（FLOPS）和参数量的计算
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127055156