Tìm hiểu về Mouse event

Trong bài này chúng ta sẽ cùng tìm hiểu về mouse events và những thuộc tính của chúng.

Một số event cơ bản

mousedown/mouseup Khi click/thả chuột trên element.

mouseover/mouseout Con trỏ di vào/ra khỏi element.

mousemove Khi con trỏ chuột di chuyển trên element.

click Được phát sau khi mousedown và mouseup trên cùng một element và chuột trái được sử dụng.

contextmenu Được phát sau mousedown nếu chuột phải được sử dụng.

dblclick Được phát sau khi click đúp trên element.

Thứ tự phát event

Một action có thể phát nhiều event. Ví dụ, khi click trên một element, đầu tiên event mousedown được phát khi nhấp chuột, tiếp đó khi thả chuột lần lượt event mouseup và click được phát. Những handler của những event này cũng được gọi theo cùng thứ tự: onmousedown -> onmouseup -> onclick.

which? chuột trái hay chuột phải

Những event liên quan đến click luôn có thuộc tính which cho biết bạn đang sử dụng phím chuột nào. Đương nhiên which không cần thiết với event click và contextmenu vì click luôn được phát bởi chuột trái còn contextmenu luôn được phát bởi chuột phải. Tuy vậy với những event như mousedown, mouseup ta không thể phân biệt được điều này, ta cần đến thuộc tính này để nhận biết chuột bên nào đang được sử dụng.

Có 3 giá trị của which tương ứng với 3 trường hợp dùng chuột

event.which == 1 - chuột trái
event.which == 2 - con lăn giữa chuột
event.which == 3 - chuột phải

Tổ hợp với shift, alt, ctrl và meta

Mouse event cũng chứa những thông tin liên quan đến phím được kết hợp. Những phím kết hợp cùng với chuột có thể nhận biết thông qua những thuộc tính tương ứng: shiftKey, altKey, ctrlKey, metaKey (Cmd với Mac) Ví dụ

<button id="button">Alt+Shift+Click on me!</button>

<script>
  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('Hooray!');
    }
  };
</script>

Trong đoạn script trên trình duyệt sẽ chỉ thông báo message Hooray! khi button được click kết hợp cùng lúc với giữ phím Alt và Shift.

Tọa độ: clientX/Y, pageX/Y

Tất cả mouse event đều có chứa thông tin liên quan đến tọa độ của con trỏ chuột:

• đối với Window: clientX, clientY Ví dụ ta có window có size là 500x500, vậy khi chuột ở góc trên bên trái thì giá trị clientX và clientY đều bằng 0. Nếu chuột ở vị trí trung tâm thì clientX và clientY đều bằng 250.

• đối với Document: pageX, pageY pageX, pageY cũng tương tự clientX, clientY chỉ khác là giá trị của những thuộc tính này biểu hiện vị trí tương đối đối với Document.

Bỏ chọn text khi mousedown

Click chuột có thể có side-effect mà đôi khi ta không mong muốn. Ví dụ khi click đúp lên text thì text sẽ được chọn. Để tránh hiện tượng này ta có thể sử dụng thuộc tính user-select với giá trị none từ CSS

<style>
  b {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
</style>

Before...
<b ondblclick="alert('Test')">
  Unselectable
</b>
...After

Khi click đúp vào text Unselectable, phần text này không bị select. Tuy nhiên có một vấn đề là ngay cả khi ta select cả phần text trước và sau phần text này thì phần text ở giữa cũng vẫn không được select. Select text là đặc điểm mặc định của trình duyệt khi mousedown. Vậy làm sao để ta có thể select cả đoạn text bao gồm phần text Unselectable này mà vẫn chặn được select text khi click đúp? Ta sẽ chặn event mousedown .

Before...
<b ondblclick="alert('Click!')" onmousedown="return false">
  Double-click me
</b>
...After

Đoạn text “Double-click me” bây giờ sẽ ko bị select khi click đúp. Trường hợp ta muốn ngăn không cho người khác copy paste nội dung trên trang, ta cũng có thể chặn hành vi này với event 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>

Đương nhiên bạn vẫn có thể đoạn text trong div từ html nhưng không phải ai cũng biết cách này.

Tham khảo

Mouse events basics Four ways to style react components