数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究HTML DOM MouseEvent 对象
HTML DOM MouseEvent 对象表示鼠标与HTML文档元素交互时发生的事件。
这里，“MouseEvent” 可以具有以下属性和方法：
| 属性/方法 | 描述 |
|---|---|
| altKey | 返回在触发鼠标事件时键盘上的“ALT”键是否被按下 |
| button | 返回一个数字，对应于触发鼠标事件时按下的鼠标按钮 |
| buttons | 返回触发鼠标事件时按下的鼠标按钮 |
| clientX | 返回鼠标指针相对于当前窗口的水平（x）坐标，在触发鼠标事件时 |
| clientY | 返回鼠标指针相对于当前窗口的垂直（y）坐标，在触发鼠标事件时 |
| ctrlKey | 返回在触发鼠标事件时键盘上的“CTRL”键是否被按下 |
| getModifierState() | 如果指定的键被激活则返回true，否则返回false |
| metaKey | 返回在触发事件时键盘上的“META”键是否被按下 |
| movementX | 返回鼠标指针相对于上次mousemove事件位置的水平（x）坐标 |
| movementY | 返回鼠标指针相对于上次mousemove事件位置的垂直（y）坐标 |
| offsetX | 返回鼠标指针相对于目标元素边缘位置的水平（x）坐标 |
| offsetY | 返回鼠标指针相对于目标元素边缘位置的垂直（y）坐标 |
| pageX | 返回鼠标指针相对于文档的水平（x）坐标，在触发鼠标事件时 |
| pageY | 返回鼠标指针相对于文档的垂直（y）坐标，在触发鼠标事件时 |
| relatedTarget | 返回触发鼠标事件的HTML元素 |
| screenX | 返回鼠标指针相对于屏幕的水平（x）坐标，在触发事件时 |
| screenY | 返回鼠标指针相对于屏幕的垂直（y）坐标，在触发事件时 |
| shiftKey | 返回在触发事件时键盘上的“SHIFT”键是否被按下 |
| which | 返回触发鼠标事件时按下的鼠标按钮 |
让我们来看一个MouseEvent clientX 属性的例子：
示例
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-clientX</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.clientX;
var y = event.clientY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
else{
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html>输出
单击“开始”按钮并在绿色（安全）区域内移动光标：
单击“开始”按钮并在绿色（安全）区域末端移动光标：
单击“开始”按钮并在红色（危险）区域内移动光标：
此外，“MouseEvent” 可以具有以下事件：
| 事件 | 描述 |
|---|---|
| onclick | 当用户单击元素时发生此事件 |
| oncontextmenu | 当用户右键单击元素以打开上下文菜单时发生此事件 |
| ondblclick | 当用户双击元素时发生此事件 |
| onmousedown | 当用户在元素上按下鼠标按钮时发生此事件 |
| onmouseenter | 当指针移动到元素上时发生此事件 |
| onmouseleave | 当指针移出元素时发生此事件 |
| onmousemove | 当指针在元素上移动时发生此事件 |
| onmouseout | 当用户将鼠标指针移出元素或其子元素之一时发生此事件 |
| onmouseover | 当指针移动到元素或其子元素之一上时发生此事件 |
| onmouseup | 当用户在元素上释放鼠标按钮时发生此事件 |
让我们来看一个MouseEvent onmouseout 事件的例子：
示例
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent onmouseout</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-onmouseout</legend>
<div id="outer" onmouseout="gameStart(event)">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<div id="divDisplay"></div>
</fieldset></form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function gameStart(event) {
var fetchedID = event.relatedTarget.id
if(fetchedID !== '')
divDisplay.textContent = 'You are hovering over '+fetchedID+' <div> element';
}
</script>
</body>
</html>输出
悬停在绿色（安全）区域上：
悬停在上方的红色（危险）区域上：
悬停在下方的红色（危险）区域上：
更新于：2019年10月25日
372 次浏览
广告