MouseEvent trong JavaScript và cách xử lý thông tin từ sự kiện chuột | Laptrinhcanban.com

MouseEvent trong JavaScript và cách xử lý thông tin từ sự kiện chuột

Cùng tìm hiểu về MouseEvent trong JavaScript. MouseEvent là kết quả thu được từ các sự kiện chuột như click và mousemove. Bằng cách thao tác với MouseEvent, chúng ta có thể lấy các thông tin của chuột, ví dụ như lấy vị trí con trỏ trong JavaScript chẳng hạn.

Lấy vị trí con trỏ trong JavaScript

Từ MouseEvent Object, chúng ta có thể lấy thông tin về vị trí toạ độ hiện tại của con trỏ .

Các thuộc tính cùng công dụng của chúng như sau:

Thuộc tínhCông dụngVị trí toạ độ gốc
MouseEvent.offsetXToạ độ ngang của con trỏPhía trên trái Element phát sinh sự kiện
MouseEvent.offsetYToạ độ dọc của con trỏPhía trên trái Element phát sinh sự kiện
MouseEvent.clientXToạ độ dọc của con trỏPhía trên trái của brower
MouseEvent.clientYToạ độ dọc của con trỏPhía trên trái của brower
MouseEvent.screenXToạ độ dọc của con trỏPhía trên trái của màn hình
MouseEvent.screenYToạ độ dọc của con trỏPhía trên trái của màn hình

Lấy vị trí con trỏ trong JavaScript

Bằng cách sử dụng 6 thuộc tính này, chúng ta dễ dàng có thể lấy vị trí con trỏ trong JavaScript, như trong mã lệnh sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mybox{
width:300px;
height:100px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>Lấy vị trí con trỏ trong JavaScript</p>

<div id="mybox"></div>

<script>
function mouseClick(event){
console.log('offsetX : ' + event.offsetX);
console.log('offsetY : ' + event.offsetY);
console.log('clientX : ' + event.clientX);
console.log('clientY : ' + event.clientY);
console.log('pageX : ' + event.pageX);
console.log('pageY : ' + event.pageY);
console.log('screenX : ' + event.screenX);
console.log('screenY : ' + event.screenY);
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>

</body>
</html>

Khi chúng ta click chuột tại một vị trí bất kỳ trong box có id="mybox", vị trí hiện tại của con trỏ cũng sẽ được lấy và in ra màn hình như sau:

Lấy vị trí con trỏ trong JavaScript

Kiểm tra phím được nhấn cùng với chuột trong JavaScript

Trong MouseEvent được tích hợp 4 loại thuộc tính giúp kiểm tra các phím hỗ trợ như Shitf, Ctrl hay Alt có được nhấn khi người dùng click chuột hay không như sau:

Thuộc tínhCông dụng
MouseEvent.altKeyTrả về true nếu con trỏ Alt được nhấn
MouseEvent.ctrlKeyTrả về true nếu con trỏ Control được nhấn
MouseEvent.metaKeyTrả về true nếu con trỏ Meta được nhấn
MouseEvent.shiftKeyTrả về true nếu con trỏ Shift được nhấn

Ví dụ để kiểm tra xem các phím bổ trợ như Ctrl hay Shift có được nhấn cùng lúc khi click chuột hay không, hãy dùng mã script sau đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mybox{
width:300px;
height:100px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>Lấy phím nhấn cùng chuột trong JavaScript</p>

<div id="mybox"></div>

<script>
function mouseClick(event){
if (event.altKey){
console.log('Push Alt Key');
}

if (event.ctrlKey){
console.log('Push Control Key');
}

if (event.metaKey){
console.log('Push Meta Key');
}

if (event.shiftKey){
console.log('Push Shift Key');
}
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>

</body>
</html>

Kết quả nếu người dùng nhấn một trong các phím này khi click chuột thì tên phím sẽ được in ra màn hình như sau:

Lấy phím nhấn cùng chuột trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng MouseEvent trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.