MouseEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Giao diện MouseEvent biểu thị các sự kiện xảy ra do người dùng tương tác với thiết bị trỏ (chẳng hạn như chuột). Các sự kiện phổ biến sử dụng giao diện này bao gồm click, dblclick, mouseup, mousedown.

MouseEvent bắt nguồn từ UIEvent, và UIEvent lại bắt nguồn từ Event. Mặc dù phương thức MouseEvent.initMouseEvent() được giữ lại để tương thích ngược, nhưng việc tạo đối tượng MouseEvent phải được thực hiện bằng cách sử dụng hàm tạo MouseEvent().

Một số sự kiện cụ thể hơn dựa trên MouseEvent, bao gồm WheelEvent, DragEvent và PointerEvent.

Người xây dựng

MouseEvent(): Tạo một đối tượng MouseEvent.

Thuộc tính tĩnh

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Non-standard Read only: Lực tối thiểu cần thiết cho một cú nhấp chuột bình thường.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Non-standard Read only: Lực tối thiểu cần thiết cho một cú bấm mạnh.

Thuộc tính phiên bản

Giao diện này cũng kế thừa các thuộc tính của giao diện cha là UIEvent và Event.

MouseEvent.altKey Read only: Trả về true nếu phím alt không hoạt động khi sự kiện chuột được kích hoạt.
MouseEvent.button Read only: Số nút được nhấn hoặc nhả (nếu có) khi sự kiện chuột được kích hoạt.
MouseEvent.buttons Read only: Các nút được nhấn (nếu có) khi sự kiện chuột được kích hoạt.
MouseEvent.clientX Read only: Tọa độ X của con trỏ chuột trong tọa độ khung nhìn.
MouseEvent.clientY Read only: Tọa độ Y của con trỏ chuột trong tọa độ khung nhìn.
MouseEvent.ctrlKey Read only: Trả về true nếu phím control không hoạt động khi sự kiện chuột được kích hoạt.
MouseEvent.layerX Non-standard Read only: Trả về tọa độ ngang của sự kiện so với lớp hiện tại.
MouseEvent.layerY Non-standard Read only: Trả về tọa độ dọc của sự kiện so với lớp hiện tại.
MouseEvent.metaKey Read only: Trả về true nếu phím meta không hoạt động khi sự kiện chuột được kích hoạt.
MouseEvent.movementX Read only: Tọa độ X của con trỏ chuột so với vị trí của sự kiện di chuyển cuối cùng cùng loại (a mousemove, pointermove hoặc pointerrawupdate).
MouseEvent.movementY Read only: Tọa độ Y của con trỏ chuột so với vị trí của sự kiện di chuyển cuối cùng cùng loại (a mousemove, pointermove hoặc pointerrawupdate).
MouseEvent.offsetX Read only: Tọa độ X của con trỏ chuột so với vị trí cạnh đệm của nút đích.
MouseEvent.offsetY Read only: Tọa độ Y của con trỏ chuột so với vị trí cạnh đệm của nút đích.
MouseEvent.pageX Read only: Tọa độ X của con trỏ chuột so với toàn bộ tài liệu.
MouseEvent.pageY Read only: Tọa độ Y của con trỏ chuột so với toàn bộ tài liệu.
MouseEvent.relatedTarget Read only: Mục tiêu phụ cho sự kiện, nếu có.
MouseEvent.screenX Read only: Tọa độ X của con trỏ chuột trong tọa độ màn hình.
MouseEvent.screenY Read only: Tọa độ Y của con trỏ chuột trong tọa độ màn hình.
MouseEvent.shiftKey Read only: Trả về true nếu phím shift không hoạt động khi sự kiện chuột được kích hoạt.
MouseEvent.mozInputSource Non-standard Read only: Loại thiết bị đã tạo ra sự kiện (một trong các hằng số MOZ_SOURCE_*). Ví dụ: điều này cho phép bạn xác định xem sự kiện chuột được tạo bởi chuột thực hay sự kiện chạm (điều này có thể ảnh hưởng đến mức độ chính xác mà bạn diễn giải tọa độ liên quan đến sự kiện).
MouseEvent.webkitForce Non-standard Read only: Lượng áp lực được áp dụng khi nhấp chuột.
MouseEvent.x Read only: Bí danh của MouseEvent.clientX.
MouseEvent.y Read only: Bí danh của MouseEvent.clientY.

Phương thức sơ thẩm

Giao diện này cũng kế thừa các phương thức của cha nó là UIEvent và Event.

MouseEvent.getModifierState(): Trả về trạng thái hiện tại của phím bổ trợ đã chỉ định. Xem KeyboardEvent.getModifierState() để biết chi tiết.
MouseEvent.initMouseEvent() Deprecated: Khởi tạo giá trị của MouseEvent được tạo. Nếu sự kiện đã được gửi đi thì phương thức này sẽ không có tác dụng gì.

Ví dụ

Ví dụ này minh họa việc mô phỏng một lượt nhấp chuột (tạo sự kiện nhấp chuột theo chương trình) trên một hộp kiểm bằng các phương thức DOM. Trạng thái sự kiện (bị hủy hay không) sau đó được xác định bằng giá trị trả về của phương thức EventTarget.dispatchEvent().

HTML

html

<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p>
  <button id="button">Click me to send a MouseEvent to the checkbox</button>
</p>

JavaScript

function simulateClick() {
  // Get the element to send a click event
  const cb = document.getElementById("checkbox");

  // Create a synthetic click MouseEvent
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  // Send the event to the checkbox element
  cb.dispatchEvent(evt);
}
document.getElementById("button").addEventListener("click", simulateClick);

Kết quả

Thông số kỹ thuật

Specification
Pointer Events # interface-mouseevent
CSSOM View Module # extensions-to-the-mouseevent-interface
Pointer Lock 2.0 # extensions-to-the-mouseevent-interface

Khả năng tương thích của trình duyệt

Xem thêm

Cha mẹ trực tiếp của nó, UIEvent
PointerEvent: Dành cho các sự kiện con trỏ nâng cao, bao gồm cảm ứng đa điểm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content