Cách xử lý sự kiện chuột phải bằng JavaScript

Cách xử lý sự kiện chuột phải bằng JavaScript

Đô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

Cách xử lý sự kiện chuột phải bằng JavaScript

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

Cách xử lý sự kiện chuột phải bằng JavaScript

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

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

Leave a Reply

Your email address will not be published.