Custom hiệu ứng click chuột phải Javascript

Khái quát

Có lẻ không một ai xa lạ gì việt nhấn vào chuột phải khi truy cập vào một trang web hay một đâu đó.
Nếu chuột trái giúp chúng ta nhấn thẳng vào liên kết hay đối tượng và mở ra đường liên kết mới thì với chuột phải nó sẽ mở ra cho chúng ta một hộp menu gồm rất nhiều thông tin và lựa chọn điều hướng, điều này luôn đúng dù bạn đang nhấn chuột phải vào bất cứ một ứng dụng hay một nền tảng nào không chỉ riêng website.

Custom hiệu ứng click chuột phải Javascript
Hình ảnh mô phỏng menu xuất hiện khi click chuột phải

Bên trên chính là hình ảnh minh họa cho hiệu ứng hiện menu tác vụ lên khi chúng ta nhấn chuột phải. còn khi nhấn vào một hình ảnh, thì hộp menu sẽ được bổ xung các thông tin về hình ảnh như lưu hình ảnh, xem hình ảnh, xem đường dẩn hình ảnh.

Ngoài ra khi nhấn vào chuột phải còn giúp cho chúng ta có thể bạt trình kiểm tra lên và xem toàn bộ code của một trang web. Vô hình đây là điều mà rất nhiều nhà làm web lo ngại. Vì khi này chúng ta dễ dàng chỉnh sửa code và chạy trực tiếp trên trang web của mình.

Khi nào cần custom lại hiệu ứng click chuột phải

Thông thường các website về giới thiệu thường không cần dùng đến. Nhưng bây giờ chúng ta hãy thử đặc vào một dạng website khác và củng rất thông dụng.

1. Website thiết kế và bán thiết kế

Đúng như tên gọi thì nguồn thu nhập chính của họ chính là bán những thiết kế trong đó có cả thiết kế ảnh. Việc có ai đó cố ý tải chùa một thiết kế về là khó mà tránh khỏi.

Trong số đó việc nhấn vào chuột phải sẽ là cách dể dàng nhất đối với họ bởi nó sẽ hiện lên tất cả thông tin về hình ảnh kèm cả một lựa chọn tải hình về ngay.

Vì vậy mà việc ngăn chặn người dùng nhấn vào chuột phải sẽ làm giảm bớt rủi ro bị ăn cắp thiết kế. Đương nhiên là nó không triệt để, nhưng nó sẽ làm giảm bớt một lượng người chỉ biết cách đó.

2. Website bán template thiết kế web

Như đúng tên gọi, những website này có nguồn thu chính là nhờ vào việc bán các template web.
Trong khi chuột phải sẽ giúp họ bấm vào trình kiểm tra và xem được toàn bộ code. Vậy lí do gì họ cần mua nửa.

Việc chặn người dùng mở được trình kiểm tra này là điều bắt buộc nếu họ muốn giảm thiểu ruổi ro bị ăn cắp chất xám. Tuy nhiên bên cạnh đó, vì đối tượng là những người theo code nên với những dòng sản phẩm như thế này buộc những nhà làm template phải mã hóa code để khiến người dùng khó custom lại được vì vậy trở nên khó dùng hơn.

3. Những website cần bảo mật

Đây là những loại website chứa nhiều thông tin quan trọng, hoặc đôi khi là vì mục đích của những nhà làm web muốn được bảo mật mọi thông tin dù nhỏ nhất, tránh việc bị đánh cắp hoặc phá hoại.

Vậy khi này củng với trình kiểm tra khi nhấn chuột phải, họ có thể dể dàng dùng code chạy trực tiếp trên website chúng ta đễ tìm cách phá hoại nội dung.

4. Website ứng dụng

Đây là dạng website với nền tảng ứng dụng. Khi này họ không hề ngắn cấm việc chúng ta click chuột phải, mà thay vào đó vẩn cho tuy nhiên nó lại hiện một menu khác.

Menu này là menu đã được chỉnh sửa theo ý họ từ design đến nội dung.
Message hay zalo chính là một ví dụ, ta hoàn toàn có thể nhấn chuột phải, nhưng menu hiện ra lại là một menu hoàn toàn khác với nội dung mà họ tự đặt phục vụ cho quá trình trải nghiệm người dùng của họ.

Custom click chuột phải bằng Javascript 

Việc đầu tiên cần làm đó là bắt sự kiện: addEventListener là hàm trong Javascript có nhiệm vụ lắng nghe một sự kiện nào đó đang được diển ra.
Lắng nghe sự kiện click chuột phải: contextmenu chính là thuộc tính click chuột phải trong Javascript.

Vậy kết hợp lại chúng ta có một hàm lắng nghe sự kiện click chuột phải như sau:
document.addEventListener('contextmenu', function(event){
    event.preventDefault();
}).
Với event.preventDefault được sử dụng để cắt ngang tiến trình thực hiện của hệ thống, cụ thể như sau:
Khi hệ thống bắt được sự kiện click chuột phải, hệ thống sẽ tiến hành mở menu lên. Vậy nếu preventDefault chen vào giửa và cắt ngang tiến trình này khi menu chưa kịp hiện lên. Vậy sẽ không có một menu nào xuất hiện.

Video hướng dẩn chi tiết


Download code free

Previous Post Next Post