Đối tượng HTML DOM MouseEvent đại diện cho một sự kiện xảy ra trên sự tương tác của chuột với các phần tử tài liệu HTML.
Đây, “ MouseEvent ”Có thể có các thuộc tính và phương thức sau -
| Thuộc tính / Phương thức | Mô tả |
|---|---|
| altKey | Hỏi lại xem phím "ALT" trên bàn phím có được nhấn khi kích hoạt sự kiện chuột hay không |
| | Trả lời một số tương ứng với nút chuột nào được nhấn khi kích hoạt sự kiện chuột |
| | Trả lời các nút chuột nào đã được nhấn khi kích hoạt sự kiện chuột |
| clientX | Trả về tọa độ ngang (x) của con trỏ chuột, liên quan đến cửa sổ hiện tại, khi sự kiện chuột được kích hoạt |
| clientY | Trả về tọa độ dọc (y) của con trỏ chuột, so với cửa sổ hiện tại, khi sự kiện chuột được kích hoạt |
| ctrlKey | Trả lời xem phím "CTRL" có được nhấn trên bàn phím hay không khi kích hoạt sự kiện chuột |
| getModifierState () | Trả về true nếu khóa được chỉ định được kích hoạt và trả về false nếu không |
| metaKey | Trả lời xem phím "META" có được nhấn trên bàn phím khi một sự kiện được kích hoạt hay không |
| movementX | Trả lại tọa độ ngang (x) của con trỏ chuột tương quan với vị trí của sự kiện di chuyển chuột cuối cùng |
| phong tràoY | Trả lại tọa độ dọc (y) của con trỏ chuột so với vị trí của sự kiện di chuyển chuột cuối cùng |
| offsetX | Trả lại tọa độ ngang (x) của con trỏ chuột tương quan với vị trí của cạnh của phần tử mục tiêu |
| offsetY | Trả về tọa độ dọc (y) của con trỏ chuột so với vị trí của cạnh của phần tử mục tiêu |
| pageX | Trả về tọa độ ngang (x) của con trỏ chuột, liên quan đến tài liệu, khi sự kiện chuột được kích hoạt |
| trangY | Trả về tọa độ dọc (y) của con trỏ chuột, so với tài liệu, khi sự kiện chuột được kích hoạt |
| RelatedTarget | Trả lời phần tử HTML đã kích hoạt sự kiện chuột |
| screenX | Trả về tọa độ ngang (x) của con trỏ chuột, so với màn hình, khi một sự kiện được kích hoạt |
| screenY | Quay lại tọa độ dọc (y) của con trỏ chuột, so với màn hình, khi một sự kiện được kích hoạt |
| shiftKey | Trả lời xem phím "SHIFT" có được nhấn trên bàn phím khi một sự kiện được kích hoạt hay không |
| cái nào | Trả lời nút chuột nào đã được nhấn khi kích hoạt sự kiện chuột |
Hãy để chúng tôi xem một ví dụ về MouseEvent clientX tài sản -
Ví dụ
<!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> Đầu ra
Sau khi nhấp vào ‘ Bắt đầu’ nút và con trỏ trong vùng màu xanh lục (an toàn) -
Sau khi nhấp vào ‘ Bắt đầu’ nút và con trỏ ở cuối vùng màu xanh lục (an toàn) -
Sau khi nhấp vào ‘ Bắt đầu Nút và con trỏ trong khu vực màu đỏ (nguy hiểm) -
Ngoài ra, “ MouseEvent ”Có thể có các sự kiện sau -
| Sự kiện | Mô tả |
|---|---|
| onclick | Theevent xảy ra khi người dùng nhấp vào một phần tử |
| oncontextmenu | Theevent xảy ra khi người dùng nhấp chuột phải vào một phần tử để mở menu acontext |
| ondblclick | Theevent xảy ra khi người dùng nhấp đúp vào một phần tử |
| onmousedown | Theevent xảy ra khi người dùng nhấn nút chuột qua một phần tử |
| onmouseenter | Theevent xảy ra khi con trỏ được di chuyển vào một phần tử |
| onmouseleave | Theevent xảy ra khi con trỏ được di chuyển ra khỏi một phần tử |
| onmousemove | Theevent xảy ra khi con trỏ đang di chuyển trong khi nó vượt quá ngưỡng |
| onmouseout | Theevent xảy ra khi người dùng di chuyển con trỏ chuột ra khỏi phần bổ sung hoặc ra khỏi một trong các phần tử con của nó |
| onmouseover | Theevent xảy ra khi con trỏ được di chuyển vào một phần tử hoặc phần tử con của nó |
| onmouseup | Theevent xảy ra khi người dùng thả nút chuột qua một phần tử |
Hãy để chúng tôi xem một ví dụ về MouseEvent onmouseout sự kiện -
Ví dụ
<!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> Đầu ra
Di chuột qua khu vực màu xanh lá cây (an toàn) -
Di chuột qua khu vực màu đỏ phía trên (nguy hiểm) -
Di chuột qua khu vực màu đỏ (nguy hiểm) thấp hơn -
