104_鼠标事件对象

最新推荐文章于 2024-04-26 18:35:50 发布
最新推荐文章于 2024-04-26 18:35:50 发布
阅读量391 收藏
点赞数 1
分类专栏： JavaScript学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/121239715
版权

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. 效果图

自由与束缚JavaJavaScript
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C#.net_经典编程例子400个
05-17
142 3.6　Process组件　143 实例102　使用Process组件访问本地进程　143 3.7　Timer组件　145 实例103　使用Timer组件制作计时器　145 实例104　使用Timer组件显示当前系统时间　150 实例105　...
Eclipse_Swt_Jface_核心应用_部分19
10-09
8.4.2 鼠标事件的各种属性 139 8.5 其他常用的事件 139 8.5.1 选中事件 139 8.5.2 文本修改程序示例 140 8.5.3 文本修改事件：VerifyEvent的各种属性 142 8.5.4 文本修改事件：VerifyEvent和ModifyEvent的...
mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)
阿牛哥的博客
07-25 488
mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)
MouseEvent鼠标事件对象
...
08-24 448
MouseEvent鼠标事件对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
捋清楚并整理关于事件参数 MouseEvent、全局对象 Window、元素 Element 中的位置和尺寸属性
最新发布
小学都hold不住的工程shi
04-26 1339
元素 Element 中的位置和尺寸属性
QML事件处理之鼠标事件（MouseEvent）和滚轮事件（WheelEvent）
kingzhou_的博客
12-05 2701
鼠标事件和滚轮事件
JavaScript键盘鼠标事件处理
weixin_30640769的博客
02-15 470
监听键盘鼠标事件 监听某个按键事件 当键盘上的某个键被按下时，会依次触发一次下面的事件： onkeydown: 键盘按下这个动作（按下键盘） onkeypress: 键盘被按住（一直按着键盘不动） onkeyup: 键盘被弹起（松开键盘） 通过监听keydown事件既可以知道键盘被按下： document.onkeydown = function(event) { // 键盘按下时触发...
事件对象属性
Issssy的博客
11-25 181
不同的事件对应的事件属性也不一样，例如鼠标移动相关的事件就有坐标信息，而其他事件就不会包含坐标信息。浏览器中的事件都是以对象的形式存在的， 在标准的 DOM 中，规定事件对象必须作为唯一的参。当然，随着浏览器的发展，事件也会不出新变化，例如移动设备出现以后，就增加了“触摸”事件。键盘事件:使用键盘在页面上执行某 些操作时触发的事件。鼠标事件:使用鼠标在页面上执行某些操操作时触发的事件。输入事件:向文档中输入文本时触发的事件。输入法事件:使用某些输入法时触发的事件。滚轮事件:使用鼠标滚轮时触发的事事件。
（mouse_event参数）鼠标事件表
这个博主不懒，但Ta什么也没写~（私信互关24小时必回）
11-17 302
指定鼠标按钮状态的值设置为指示状态的更改，而不是正在进行的条件。例如，如果按下并按住鼠标左键，是在首次按下左按钮时设置的，但不是在后续动作时设置的。同样，仅在首次释放按钮时设置。控制鼠标运动和按钮单击的各个方面。此参数可以是以下值的某些组合。
【JavaScript 教程】事件——鼠标事件
web前端开发
06-27 1202
作者 | 阮一峰鼠标事件的种类鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。click：按下鼠标（通常是按下主按钮）时触发。dbl...
Python OpenCV cv2鼠标事件标记和类型（MouseEventFlags、MouseEventTypes）
qq_35037684的博客
08-13 445
传送门：https://blog.csdn.net/lly1122334/article/details/88975503
事件对象的常用属性
weixin_68658847的博客
09-26 160
事件对象的常用属性
【转】QMouseEvent鼠标事件简介
热门推荐
xuzheng11332的博客
04-21 1万+
首先请注意，Qt中的QMouseEvent一般只涉及鼠标左键或右键的单击、释放等操作，而对鼠标滚轮的响应则通过QWheeEvent来处理。 以下内容来自QMouseEvent的API文档。 1. QMouseEvent的详细描述 QMouseEvent类包含了用于描述鼠标事件的参数。 当在一个窗口里按住鼠标按键、或移动、或释放就会产生鼠标事件QMouseEvent。 鼠标移动事件只会
MouseEvent代替initMouseEvent
时光留不住，毕竟东流去
10-13 1463
由于initMouseEvent方法被摒弃，使用MouseEvent的构造函数方法
java 中鼠标事件_Java中的鼠标事件
06-06
Java中的鼠标事件指的是用户在使用鼠标时，通过程序对鼠标的各种操作进行响应的机制。Java提供了一系列的接口和类来处理鼠标事件，主要包括以下几个方面： 1. 鼠标事件监听器：Java中的鼠标事件监听器是一个接口，主要用于监听鼠标事件，包括鼠标点击、鼠标移动、鼠标拖拽等。 2. 鼠标事件适配器：Java中还提供了鼠标事件适配器，它是鼠标事件监听器的一个抽象类，可以通过继承该类来简化代码。 3. MouseEvent类：Java中的MouseEvent类用于封装鼠标事件的信息，包括鼠标位置、鼠标按键等。 4. 鼠标事件的处理方法：Java中使用MouseListener和MouseMotionListener接口来处理鼠标事件，其中MouseListener主要处理鼠标的点击和释放事件，而MouseMotionListener主要处理鼠标的移动和拖拽事件。 总之，Java中的鼠标事件机制为开发者提供了丰富的鼠标操作响应方式，可以根据实际需求选择适合的方式进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值