104_鼠标事件对象

最新推荐文章于 2024-08-04 08:45:07 发布
原创 最新推荐文章于 2024-08-04 08:45:07 发布 · 514 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细解析了鼠标事件如mousedown、mouseup等触发时的MouseEvent对象参数，包括ctrlKey、altKey、shiftKey、metaKey等关键属性，以及客户端与屏幕坐标、按钮状态和事件类型等。通过JavaScript代码实例展示了如何使用这些属性。

1. 当发生mousedown、mouseup、dblclick、mouseover、mouseenter、mousemove、mouseout和 mouseleave事件时, 它们的执行函数都会传递MouseEvent(鼠标事件对象)参数。

2. MouseEvent.ctrlKey事件属性

2.1. MouseEvent.ctrlKey指示当事件发生时, Ctrl键是否被按下并保持住。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

3. MouseEvent.altKey事件属性

3.1. MouseEvent.altKey指示在指定的事件发生时, Alt键是否被按下并保持住了。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

4. MouseEvent.shiftKey事件属性

4.1. MouseEvent.shiftKey指示当事件发生时, "Shift"键是否被按下并保持住。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

5. MouseEvent.metaKey事件属性

5.1. MouseEvent.metaKey指示当事件发生时, "meta"键是否被按下并保持住。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

5.2. "meta"键如下图

6. MouseEvent.clientX事件属性

6.1. MouseEvent.clientX返回当事件被触发时鼠标指针相对于浏览器窗口的水平坐标。

7. MouseEvent.clientY事件属性

7.1. MouseEvent.clientY返回当事件被触发时鼠标指针向对于浏览器窗口的垂直坐标。

8. MouseEvent.screenX事件属性

8.1. MouseEvent.screenX可返回事件发生时鼠标指针相对于屏幕的水平坐标。

9. MouseEvent.screenY事件属性

9.1. MouseEvent.screenY可返回事件发生时鼠标指针相对于屏幕的垂直坐标。

10. MouseEvent.button事件属性

10.1. MouseEvent.button可返回一个整数, 指示当事件被触发时哪个鼠标按键被点击。

10.2. 鼠标左键对应的值: 0。

10.3. 鼠标中键对应的值: 1。

10.4. 鼠标右键对应的值: 2。

11. MouseEvent.type事件属性

11.1. MouseEvent.type返回一个字符串值, 指示当前触发的事件类型。

12. MouseEvent.pageX事件属性

12.1. MouseEvent.pageX返回当事件被触发时鼠标指针相对于文档的水平坐标。

13. MouseEvent.pageY事件属性

13.1. MouseEvent.pageY返回当事件被触发时鼠标指针向对于文档的垂直坐标。

14. 例子

14.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标事件对象(MouseEvent)</title>

		<style type="text/css">
			div {
				width: 3000px;
				height: 300px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="myDiv"></div>

		<script type="text/javascript">
			function mymousedown(e){ // e是MouseEvent对象
				console.log('mousedown [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
					+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			function mymouseup(e){ // e是MouseEvent对象
				console.log('mouseup [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
				 	+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY+ ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			function mydblclick(e){ // e是MouseEvent对象
				console.log('dblclick [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
				 	+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			function mymouseover(e){ // e是MouseEvent对象
				console.log('mouseover [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
				 	+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			function mymouseenter(e){ // e是MouseEvent对象
				console.log('mouseenter [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
				 	+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY+ ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			var move = 0;
			function mymousemove(e){ // e是MouseEvent对象
				if(move >= 1) return;
				move++; 
				console.log('mousemove [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
				 	+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			function mymouseout(e){ // e是MouseEvent对象
				console.log('mouseout [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
				 	+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY+ ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			function mymouseleave(e){ // e是MouseEvent对象
				console.log('mouseleave [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey
				 	+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY
				 	+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');
			}

			var myDiv = document.getElementById('myDiv');

			myDiv.addEventListener('mousedown', mymousedown);
			myDiv.addEventListener('mouseup', mymouseup);
			myDiv.addEventListener('dblclick', mydblclick);

			myDiv.addEventListener('mouseover', mymouseover);
			myDiv.addEventListener('mouseenter', mymouseenter);
			myDiv.addEventListener('mousemove', mymousemove);
			myDiv.addEventListener('mouseout', mymouseout);
			myDiv.addEventListener('mouseleave', mymouseleave);
		</script>
	</body>
</html>

14.2. 效果图

事件对象e 点击 事件对象内光标位置获取 键盘按下对应的编码 实时获取坐标原点 鼠标跟随
mx0102的博客
01-18 353
事件对象e 点击 事件对象内光标位置获取 键盘按下对应的编码 实时获取坐标原点 鼠标跟随
opencascade AIS_ViewController源码学习 视图控制、包含鼠标事件等
汤圆
08-05 1629
用于在GUI和渲染线程之间处理视图器事件的辅助结构。该类实现了以下功能：缓存存储用户输入状态（鼠标、触摸和键盘）。将鼠标/多点触控输入映射到视图相机操作（平移、旋转、缩放）。输入事件不会立即应用，而是排队等待两个工作线程单独处理：UI线程接收用户输入，渲染线程用于OCCT 3D视图绘制。
事件对象属性
Issssy的博客
11-25 235
不同的事件对应的事件属性也不一样，例如鼠标移动相关的事件就有坐标信息，而其他事件就不会包含坐标信息。浏览器中的事件都是以对象的形式存在的， 在标准的 DOM 中，规定事件对象必须作为唯一的参。当然，随着浏览器的发展，事件也会不出新变化，例如移动设备出现以后，就增加了“触摸”事件。键盘事件:使用键盘在页面上执行某 些操作时触发的事件。鼠标事件:使用鼠标在页面上执行某些操操作时触发的事件。输入事件:向文档中输入文本时触发的事件。输入法事件:使用某些输入法时触发的事件。滚轮事件:使用鼠标滚轮时触发的事事件。
鼠标事件对象
weixin_48340600的博客
09-22 610
鼠标事件对象 1、e.clientX和e.clientY 可视区的x,y坐标 不论页面滚动多长，返回的值都是相对可视区的坐标 2、e.pageX和e.pageY 鼠标相对文档的x,y坐标（常用） 随着页面滚动，返回的值是鼠标相对于页面头部或者最左侧的距离 3、e.screenX和e.screenY 相对于电脑屏幕的坐标 不论浏览器在哪个位置，返回的都是鼠标相对于电脑屏幕的坐标 例：跟随鼠标移动的天使 1、为document添加mousemove事件，并且获得鼠标相对文档的坐标 2...
鼠标事件-事件对象
厚渡
07-07 268
标题事件对象归纳
鼠标事件 事件对象
lishundi的博客
08-10 600
事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘操作产生的event中会包含与按下的键有关的信息。 （1）clientX()   当前鼠标事件发生时鼠标和可视区域左侧的距离 (2)clientY()  当前鼠标事件发生时鼠标和可视区域顶部的距离 (3)offsetX...
Qt 鼠标事件触发到转发到传到接收对象全过程剖析
临渊羡鱼，不如退而结网
03-15 1831
总结的说，Qt的事件和Qt中的signal不一样。如果我们使用系统预定义的控件，那我们关心的是信号，如果自定义控件我们关心的是事件。假如你在一个widget上连续地调用update() 十次，因update()而产生的这十个事件，将会自动地被合并为一个单独的事件，但是QPaintEvents事件附带的区域信息也合并了。但有时，你可能需要在调用event()函数之前做一些自己的操作，比如，对话框上某些组件可能并不需要响应回车键按下的事件，此时，你就需要重新定义组件的event()函数。
C# 远程鼠标键盘控制
蜜汁程序员的博客
01-15 3080
例子比较简单，讲道理其实一分钟就应该做好的，但是我却做了一周。原因也很扯淡，遇到了两个问题。 1、鼠标传递过去，位置变化极小。 2、键盘传递过去，按一次变成了按两次。 昨天看了一天，解决了，解决原因是：重新编译+重启了电脑。 心态崩了 为啥心态崩了呢，因为重新编译+重启了电脑，我试了很多次，但是只有昨天成功了。之后也都一直成功。所以到底为啥之前就不行呢，不知道。简而言之，要么是我抽...
Qt 事件机制,底层实现原理
肖邦的夜曲的专栏
01-13 6194
【1】事件 事件是可以被控件识别的操作。如按下确定按钮、选择某个单选按钮或复选框。 每种控件有自己可识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件等等。 事件就是用户对窗口上各种组件的操作。 【2】Qt事件 由窗口系统或Qt自身产生的，用以响应所发生各类事情的操作。具体点，Qt事件是一个QEvent对象，用于描述程序内部或外部发生的动作。 【3】Qt事件产生类型 1、键盘或鼠标事件：用户按下或松开键盘或鼠标上的按键时，就可以产生一个键盘或者鼠标事件。 2、绘制事件
python鼠标宏 记录键鼠操作并重播
m0_68324159的博客
05-04 2283
使用python制作宏 记录用户的鼠标 键盘操作并回放重播
JavaScript----- 鼠标事件对象
weixin_45904557的博客
06-12 696
event对象代表事件的状态,跟事件相关的一系列信息的集合以下是一些鼠标事件对象;鼠标事件对象举个栗子:
JavaScript-192：鼠标事件对象
臧小川的博客
02-17 410
JS // 鼠标事件对象 MouseEvent document.addEventListener('click', function (e) { // 1 我们的 client 鼠标在可视区的X Y console.log(e); console.log(e.clientX); console.log(e.clientY); // 2.
Event对象之鼠标事件
zzzzz周绍辉的博客
07-22 1072
Event 对象Event 对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！事件句柄　(Event Handlers)HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入
23 【事件对象与鼠标事件】
DSelegent的博客
08-25 645
23 【事件对象与鼠标事件】
JS-DOM事件流 鼠标事件对象 键盘事件对象 键盘事件
qq_44143906的博客
10-25 213
事件流：从页面接收事件的顺序。 DOM事件流：事件的传播过程。 一、三个阶段： 1.捕获阶段：从大到小 2.当前目标阶段 3.冒泡阶段：从小到大 二、注意 1.js代码只能执行捕获或者冒泡一个阶段 2.addEventListener的第三个参数是true，则为捕获阶段。 3.addEventListener的第三个参数是false或省略，则为冒泡阶段 4.onblur、onfocus、onmouseenter、onmouseleave这些事件没有冒泡。 事件对象 一、定义 1.写在侦听函数里的形参e
JavaScript基础(29)_事件对象、鼠标移动事件
no15870678621的博客
08-04 864
JS事件对象、鼠标移动事件
事件（鼠标事件、事件处理模型、事件对象）
巧克力很苦的小博客
09-06 1103
鼠标事件 鼠标点击左键 并且鼠标抬起时触发 var oBox = document.getElementById('box'); oBox.onclick = function(){//DOM0级事件 console.log('我被点击了'); }; 鼠标右键点击了6下 鼠标的任意键在按下时会触发 var oBox = document.g...
事件类型—鼠标事件
雷雨天的雷胖子
05-14 6191
目录 一、事件分类 二、事件顺序 三、事件对象 坐标属性 修改键属性 relatedTarget属性 button属性 四、事件应用 一、事件分类 鼠标事件共有11种类型，分别是click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave和onmou...
事件高级 （黑马课程总结【侵删】）
qq_42024229的博客
10-08 267
注册事件（绑定事件） 删除事件（解绑事件） DOM事件流 事件对象 阻止事件冒泡 事件委托（代理、委派） 常用的鼠标事件 常用的键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
el-amap-polygon事件
最新发布
01-04
// 初始化事件对象 const polygonEvents = reactive({ click(event){ console.log('Polygon clicked', event); }, dblclick(event){ console.log('Polygon double-clicked', event); }, rightclick(event){ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值