MouseEvent: button property
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.
Thuộc tính chỉ đọc MouseEvent.button cho biết nút nào được nhấn hoặc nhả trên chuột để kích hoạt sự kiện.
Thuộc tính này chỉ đảm bảo cho biết nút nào được nhấn hoặc nhả trong các sự kiện do nhấn hoặc nhả một hoặc nhiều nút.
Do đó, nó không đáng tin cậy đối với các sự kiện như mouseenter, mouseleave, mouseover, mouseout hoặc mousemove.
Người dùng có thể thay đổi cấu hình các nút trên thiết bị trỏ của họ để nếu thuộc tính nút của sự kiện bằng 0 thì nguyên nhân có thể không phải do nút nằm ở bên trái nhiều nhất trên thiết bị trỏ; tuy nhiên, nó sẽ hoạt động như thể nút bên trái được nhấp vào trong bố cục nút tiêu chuẩn.
Note:
Đừng nhầm lẫn thuộc tính này với thuộc tính MouseEvent.buttons, thuộc tính này cho biết nút nào được nhấn cho tất cả các loại sự kiện chuột.
Giá trị
Một số đại diện cho một nút nhất định:
0: Nút chính, thường là nút bên trái hoặc chưa được khởi tạo tình trạng1: Nút phụ, thường là nút bánh xe hoặc ở giữa nút (nếu có)2: Nút phụ, thường là nút bên phải3: Nút thứ tư, điển hình là nút Quay lại trình duyệt4: Nút thứ năm, điển hình là nút Chuyển tiếp trình duyệt
Như đã lưu ý ở trên, các nút có thể được định cấu hình khác với bố cục "từ trái sang phải" tiêu chuẩn. Chuột được cấu hình để sử dụng bằng tay trái có thể đảo ngược thao tác của nút. Một số thiết bị trỏ chỉ có một nút bấm và sử dụng bàn phím hoặc các cơ chế nhập liệu khác để biểu thị chính, phụ, phụ, v.v. Những người khác có thể có nhiều nút được ánh xạ tới các chức năng và giá trị nút khác nhau.
Ví dụ
HTML
<button id="button">Click here with your mouse…</button>
<p id="log"></p>
JavaScript
const button = document.querySelector("#button");
const log = document.querySelector("#log");
button.addEventListener("mouseup", (e) => {
switch (e.button) {
case 0:
log.textContent = "Left button clicked.";
break;
case 1:
log.textContent = "Middle button clicked.";
break;
case 2:
log.textContent = "Right button clicked.";
break;
default:
log.textContent = `Unknown button code: ${e.button}`;
}
});
button.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Pointer Events # dom-mouseevent-button |