js鼠标事件(底下汇总)

m0_63400611

已于 2022-05-18 16:01:03 修改

阅读量178

点赞数

分类专栏： js 文章标签： javascript 前端 html

于 2021-12-12 17:29:57 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/121890296

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

常用鼠标事件

1.禁止鼠标右键菜单

contextmenu 主要控制何时显示上下文菜单,主要用于取消默认的上下文菜单

代码

//禁用右键菜单
		document.addEventListener('contextmenu', function(e) {
			e.preventDefault();//阻止默认行为
		})

2.禁止鼠标选中

代码

//禁止选中文字
		document.addEventListener('selectstart', function(e) {
			e.preventDefault();
		})

鼠标事件对象

event对象代表事件的状态,跟事件相关的一系列信息的集合,主要时鼠标事件对象MouseEvent和KeyBoardEvent

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

代码

<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同样不会冒泡

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js鼠标事件(底下汇总)

常用鼠标事件1.禁止鼠标右键菜单contextmenu 主要控制何时显示上下文菜单,主要用于取消默认的上下文菜单代码//禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault();//阻止默认行为 })2.禁止鼠标选中代码//禁止选中文字 document.addEventListener('selectstart', function(e) { .
复制链接

扫一扫

专栏目录