NỘI DUNG BÀI VIẾT
Đôi khi, bạn muốn làm điều gì đó khi người dùng sự kiện chuột phải vào một phần tử trong ứng dụng web của bạn.
Trong bài viết này, cùng mình sẽ xem xét cách xử lý sự kiện chuột phải bằng JavaScript.
Các loại sự kiện chuột
Chúng ta đã thấy một số sự kiện sau:
mousedown/mouseup
Nút chuột được nhấp / thả trên một phần tử.
mouseover/mouseout
Con trỏ chuột đến / đi ra từ một phần tử.
mousemove
Mỗi con chuột di chuyển trên một phần tử sẽ kích hoạt sự kiện đó.
click
Kích hoạt sau mousedown và sau đó mouseup trên cùng một phần tử nếu nút chuột trái được sử dụng.
dblclick
Kích hoạt sau hai lần nhấp vào cùng một phần tử trong một khung thời gian ngắn. Ngày nay hiếm khi được sử dụng.
contextmenu
Kích hoạt khi nhấn nút chuột phải. Có nhiều cách khác để mở menu, ví dụ như sử dụng một phím bàn phím đặc biệt, nó cũng kích hoạt trong trường hợp đó, vì vậy nó không chính xác là sự kiện chuột.
Thứ tự sự kiện
Như bạn có thể thấy từ danh sách trên, một hành động của người dùng có thể kích hoạt nhiều sự kiện.
Ví dụ: lần nhấp chuột trái đầu tiên sẽ kích hoạt mousedown, khi nút được nhấn, sau đó mouseup và click khi nó được nhả ra.
Trong trường hợp một hành động khởi tạo nhiều sự kiện, thứ tự của chúng được cố định. Tức là, các bộ xử lý được gọi theo thứ tự mousedown→ mouseup→ click.
Nhấp vào nút bên dưới và bạn sẽ thấy các sự kiện. Hãy thử nhấp đúp vào quá.
Trên thử nghiệm bên dưới, tất cả các sự kiện chuột đều được ghi lại và nếu có thời gian trễ hơn 1 giây giữa chúng, chúng sẽ được phân tách bằng thước ngang.
Ngoài ra, chúng ta có thể thấy thuộc tính button cho phép phát hiện nút chuột, nó được giải thích bên dưới.
Cách xử lý sự kiện chuột phải bằng JavaScript
1. Đặt thuộc tính window.oncontextmenu thành một hàm
Tôi có thể đặt thuộc tính window.contextmenu thành chức năng xử lý sự kiện để lắng nghe các sự kiện chuột phải trên trang.
Để làm điều này, tôi viết:
window.oncontextmenu = (e) => {
e.preventDefault()
console.log('right clicked')
}Code language: JavaScript (javascript)Tôi có tham số e có đối tượng sự kiện sự kiện chuột phải.
Tôi kêu gọi e.preventDefault dừng hành vi mặc định đối với các sự kiện chuột phải, tức là hiển thị menu ngữ cảnh trên trang.
Khi tôi đã gọi nó, nó có thể làm bất cứ điều gì tôi muốn trong phần còn lại của chức năng khi người dùng sự kiện chuột phải vào trang.
2. Gọi phương thức window.addEventListener để thêm chức năng xử lý sự kiện
Một cách khác để thực hiện điều gì đó khi bạn sự kiện chuột phải vào trang là gọi phương thức window.addEventListener để thêm chức năng lắng nghe sự kiện để lắng nghe các sự kiện chuột phải.
Ví dụ, bạn có thể viết:
window.addEventListener('contextmenu', (ev) => {
ev.preventDefault();
console.log('right clicked')
});Code language: JavaScript (javascript)Tôi truyền vào chuỗi 'contextmenu' để lắng nghe các sự kiện nhấn vào menu ngữ cảnh.
Sau đó, trong trình xử lý sự kiện, tôi gọi preventDefault theo cách tương tự để ngăn trình đơn của sự kiện chuột phải mặc định hiển thị.
Và sau đó tôi có thể làm những gì tôi muốn khi người dùng sự kiện chuột phải vào trang.
Kết luận
Tôi có thể lắng nghe sự kiện contextmenu và gọi hàm preventDefault xử lý sự kiện để chạy JavaScript của riêng tôi khi dùng sự kiện chuột phải vào trang.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
