資料結構
網路
關係型資料庫管理系統 (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 次瀏覽
廣告