Trong chương này, cafedev sẽ đi vào chi tiết hơn về các sự kiện chuột và thuộc tính của chúng.
Xin lưu ý: các sự kiện như vậy có thể không chỉ đến từ “thiết bị chuột” mà còn từ các thiết bị khác, chẳng hạn như điện thoại và máy tính bảng, nơi chúng được mô phỏng để tương thích.
Nội dung chính
1. 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.
… Ngoài ra còn có một số sự kiện khác, chúng ta sẽ trình bày sau.
2. 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.
3. Bẫy chuột
Các sự kiện liên quan đến nhấp chuột luôn có thuộc tính button, cho phép nhận được nút chuột chính xác.
Chúng ta thường không sử dụng nó cho click và sự kiện context menu, bởi vì cái trước chỉ xảy ra khi nhấp chuột trái và cái sau – chỉ xảy ra khi nhấp chuột phải.
Mặt khác, trình xử lý mousedown và các mouseup mà chúng ta có thể cần event.button, bởi vì những sự kiện này kích hoạt trên bất kỳ nút nào, do đó, button cho phép phân biệt giữa “chuyển xuống bên phải” và “chuyển xuống bên trái”.
Các giá trị có thể có event.button là:
| Trạng thái nút | event.button |
| Nút trái (chính) | 0 |
| Nút giữa (phụ trợ) | 1 |
| Nút phải (phụ) | 2 |
| Nút X1 (quay lại) | 3 |
| Nút X2 (chuyển tiếp) | 4 |
Hầu hết các thiết bị chuột chỉ có nút trái và phải, vì vậy các giá trị có thể là 0 hoặc 2. Các thiết bị cảm ứng cũng tạo ra các sự kiện tương tự khi một người chạm vào chúng.
Ngoài ra, có thuộc tính event.buttons có tất cả các nút hiện đang được nhấn dưới dạng số nguyên, mỗi nút một bit. Trong thực tế, thuộc tính này rất hiếm khi được sử dụng, bạn có thể tìm thông tin chi tiết tại MDN nếu cần.
event.which Lỗi thời
Code cũ có thể sử dụng thuộc tính event.which là một cách cũ không chuẩn để lấy nút, với các giá trị có thể có:
- event.which == 1 – nút bên trái,
- event.which == 2 – phím giữa,
- event.which == 3 – nút bên phải.
Hiện tại, event.which không được dùng nữa, chúng ta không nên sử dụng nó.
4. Các từ bổ nghĩa: shift, alt, ctrl và meta
Tất cả các sự kiện chuột bao gồm thông tin về các phím bổ trợ được nhấn.
Thuộc tính sự kiện:
- shiftKey: Shift
- altKey: Alt(hoặc Opt dành cho Mac)
- ctrlKey: Ctrl
- metaKey: Cmd cho Mac
Đó là true nếu phím tương ứng được nhấn trong sự kiện.
Ví dụ: nút bên dưới chỉ hoạt động khi + nhấp:Alt+Shift
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<button id="button">Alt+Shift+Click on me!</button>
<script>
button.onclick = function(event) {
if (event.altKey && event.shiftKey) {
alert('Hooray!');
}
};
</script>Chú ý: trên Mac, nó thường Cmdt hay vì Ctrl
Trên Windows và Linux có phím điều khiển Alt, Shift và Ctrl. Trên Mac có thêm một Cmd:, tương ứng với thuộc tính meta Key.
Trong hầu hết các ứng dụng, khi Windows / Linux sử dụng Ctrl, trên Mac Cmd được sử dụng.
Đó là: nơi người dùng Windows nhấn hoặc , người dùng Mac sẽ nhấn hoặc , v.v.Ctrl+Enter Ctrl+A Cmd+Enter Cmd+A
Vì vậy, nếu chúng ta muốn hỗ trợ các kết hợp như Ctrl+ nhấp chuột, thì đối với Mac, bạn nên sử dụng Cmd+ nhấp chuột. Điều đó thoải mái hơn cho người dùng Mac.
Ngay cả khi chúng tôi muốn buộc người dùng Mac phải Ctrl+ nhấp chuột – điều đó khá khó. Vấn đề là: nhấp chuột trái với Ctrl được hiểu là nhấp chuột phải vào MacOS và nó tạo ra sự kiện contextmenu, không giống sự kiện click như Windows / Linux.
Vì vậy, nếu chúng ta muốn người dùng của tất cả các hệ điều hành cảm thấy thoải mái, thì ctrlKey chúng ta nên cùng nhau kiểm tra metaKey.
Đối với code JS, điều đó có nghĩa là chúng ta nên kiểm tra if (event.ctrlKey || event.metaKey).
Ngoài ra còn có các thiết bị di động
Kết hợp bàn phím là một sự bổ sung cho quy trình làm việc. Vì vậy, nếu khách truy cập sử dụng bàn phím – chúng hoạt động.
Nhưng nếu thiết bị của họ không có nó – thì sẽ có cách để sống mà không có phím bổ trợ.
5. Tọa độ: clientX / Y, pageX / Y
Tất cả các sự kiện chuột cung cấp tọa độ theo hai kiểu:
- Cửa sổ tương đối: clientX và clientY.
- Tài liệu-họ hàng: pageX và pageY.
Chúng ta đã trình bày sự khác biệt giữa chúng trong chương Tọa độ .
Nói tóm lại, tọa độ tài liệu-tương đối pageX/Y được tính từ góc trên bên trái của tài liệu và không thay đổi khi cuộn trang, trong khi clientX/Y được tính từ góc trên bên trái của cửa sổ hiện tại. Khi trang được cuộn, chúng sẽ thay đổi.
Ví dụ, nếu chúng ta có một cửa sổ có kích thước 500×500 và chuột nằm ở góc trái phía trên, sau đó clientX và clientY là 0, bất kể như thế nào trang được cuộn.
Và nếu chuột là ở trung tâm, sau đó clientX và clientY là 250, không có vấn đề gì diễn ra trong tài liệu nó được. Chúng tương tự như position:fixed ở khía cạnh đó.
Di chuyển chuột qua trường nhập để xem clientX/clientY(ví dụ nằm trong iframe, do đó tọa độ tương đối với trường đó iframe):
<input onmousemove="this.value=event.clientX+':'+event.clientY" value="Mouse over me">6. Ngăn lựa chọn khi chuyển xuống
Nhấp đúp chuột có một tác dụng phụ có thể làm phiền trong một số giao diện: nó chọn văn bản.
Ví dụ: nhấp đúp vào văn bản bên dưới sẽ chọn nó cùng với trình xử lý của chúng ta:
<span ondblclick="alert('dblclick')">Double-click me</span>Nếu một người nhấn nút chuột trái và không nhả chuột, di chuyển chuột, điều đó cũng làm cho việc lựa chọn, thường là không mong muốn.
Có nhiều cách để ngăn lựa chọn mà bạn có thể đọc trong chương Lựa chọn và Phạm vi .
Trong trường hợp cụ thể này, cách hợp lý nhất là ngăn trình duyệt hoạt động mousedown. Nó ngăn cả hai lựa chọn này:
Before...
<b ondblclick="alert('Click!')" onmousedown="return false">
Double-click me
</b>
...AfterBây giờ phần tử in đậm không được chọn khi nhấp đúp và nhấn nút bên trái trên phần tử đó sẽ không bắt đầu lựa chọn.
Xin lưu ý: văn bản bên trong nó vẫn có thể chọn được. Tuy nhiên, lựa chọn không nên bắt đầu trên chính văn bản, mà là trước hoặc sau nó. Thường thì điều đó tốt cho người dùng.
Ngăn chặn sao chép
Nếu chúng ta muốn lựa chọn vô hiệu hóa để bảo vệ nội dung trang của chúng ta từ sao chép dán, sau đó chúng ta có thể sử dụng sự kiện khác: oncopy.
<div oncopy="alert('Copying forbidden!');return false">
Dear user,
The copying is forbidden for you.
If you know JS or HTML, then you can get everything from the page source though.
</div>Nếu bạn cố gắng sao chép một đoạn văn bản trong <div>, điều đó sẽ không hoạt động, vì hành động mặc định oncopy bị ngăn chặn.
Chắc chắn người dùng có quyền truy cập vào mã nguồn HTML của trang và có thể lấy nội dung từ đó, nhưng không phải ai cũng biết cách thực hiện.
7. Tóm lược
Sự kiện chuột có các thuộc tính sau:
- Button: button
- Phím liên quan ( true nếu ép): altKey, ctrlKey, shiftKey và metaKey (Mac).
- Nếu bạn muốn xử lý Ctrl, thì đừng quên người dùng Mac, họ thường sử dụng Cmd, vì vậy tốt hơn là nên kiểm tra if (e.metaKey || e.ctrlKey).
- Tọa độ cửa sổ tương đối: clientX/clientY
- Tọa tài liệu-tương đối: pageX/pageY.
Hành động mặc định của trình duyệt mousedown là lựa chọn văn bản, nếu nó không tốt cho giao diện thì nên ngăn chặn nó.
Trong chương tiếp theo, chúng ta sẽ xem thêm chi tiết về các sự kiện theo sau chuyển động của con trỏ và cách theo dõi các thay đổi của phần tử bên dưới nó.
Nguồn và tài liệu tiếng anh tham khảo:
Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
