Phát hiện nút chuột trái nhấn

Question

Tôi ghét sự lộn xộn này với các nút chuột do W3C tạo ra! Tôi muốn biết nếu nút chuột trái được nhấn khi tôi nhận được một sự kiện được tổ chức.

tôi sử dụng mã này

// Return true if evt carries left mouse button press 
function detectLeftButton(evt) { 
    // W3C 
    if (window.event == null) { 
    return (evt.button == 0) 
    } 
    // IE 
    else { 
    return (evt.button == 1); 
    } 
} 

Tuy nhiên, nó không hoạt động trong Opera và Chrome, bởi vì nó xảy ra như vậy mà window.event tồn tại ở đó quá.

Vì vậy, tôi phải làm gì? Tôi có một số phát hiện trình duyệt, nhưng chúng ta đều biết nó không thể được dựa vào với tất cả các mặt nạ một số trình duyệt làm gần đây. Làm cách nào để phát hiện nút chuột trái RELIABLY?

Answer 1

Câu trả lời được cập nhật. Sau đây sẽ phát hiện nếu bên trái và chỉ có nút chuột trái được nhấn:

function detectLeftButton(evt) { 
    evt = evt || window.event; 
    if ("buttons" in evt) { 
     return evt.buttons == 1; 
    } 
    var button = evt.which || evt.button; 
    return button == 1; 
} 

Đối với nhiều thông tin về xử lý sự kiện chuột trong JavaScript, hãy thử http://unixpapa.com/js/mouse.html

Answer 2

Hiện nay, một W3C standardevent.buttons tài sản được hỗ trợ bởi IE9 in standards mode và Gecko 15+.

Các W3C completely stuffed lên tài sản event.button, vì vậy đối với một tiêu chuẩn phù hợp event.button trình duyệt là 0, nhưng đối với các trình duyệt tạo ra trước tiêu chuẩn, event.button là 1.

Vì vậy, mã phải tránh sử dụng event.button ngoại trừ các trình duyệt cũ hơn. Các mã sau đây nên làm việc:

function detectLeftButton(event) { 
    if ('buttons' in event) { 
     return event.buttons === 1; 
    } else if ('which' in event) { 
     return event.which === 1; 
    } else { 
     return event.button === 1; 
    } 
} 

Answer 3

Bạn có thể sử dụng số-

sau

onmouseup="if(window.event.which==1){//code for left click} 
      else if(window.event.which==3){//code for right click}" 

Answer 4

Mặc dù event.buttons hiện đang làm việc trong Chrome, Safari vẫn không hỗ trợ nó. Một cách giải quyết là sử dụng onmousedown và onmouseup sự kiện tại tài liệu hay mức cha mẹ như: onmousedown = "bMouseDown = true" onmouseup = "bMouseDown = false"

Answer 5

// 0 left, 2 right, 1 middle, other.. extra buttons, gaming mouses 

var buttonsArray = [false, false, false, false, false, false, false, false, false]; 
var mousePressed = false; 

document.onmousedown = function(e) { 
    buttonsArray[e.button] = true; 
    mousePressed = true; 
}; 

document.onmouseup = function(e) { 
    buttonsArray[e.button] = false; 
    mousePressed = false; 
}; 

document.oncontextmenu = function() { 
    return false; 
} 

Giải thích: Khi chuột là xuống, chúng ta thay đổi đến đúng các nhấn nút trong mảng nút của chúng tôi. Khi chuột lên, chúng tôi thay đổi thành false nút nhấn thành false. Bây giờ chúng ta có thể thiết lập nút nào được nhấn chính xác hơn, nhưng chúng tôi có vấn đề nhấp chuột phải .. bởi vì với nút đó, chúng tôi mở contextmenu tại trình duyệt và thoát khỏi kiểm soát của chúng tôi ... vì vậy, chúng tôi tắt ngữ cảnh trình đơn để phát hiện đúng cách nhấp chuột phải. Nếu chúng ta không làm điều đó, chúng ta cũng phải giải quyết nhấp chuột trái ... và một biến chứng của nó thoát khỏi phản ứng này.

Để đơn giản hóa mọi thứ, chúng tôi có thể thêm một biến khác mousePressed và gắn cờ nếu chuột bị từ chối hoặc lên.

Hoạt động hoàn hảo trên chrome, tôi đã không kiểm tra nó trong trình duyệt khác nhưng tôi đoán nó ok trong firefox và opera quá ... IE ??? Tôi không quan tâm đến IE.

Hãy tận hưởng!

Answer 6

Làm việc tắt của robocat's answer, bạn có thể dễ dàng tạo ra một phần mở rộng jQuery như sau

$.fn.mouseButton = function() { 
    if (!(this instanceof MouseEvent || this[0] instanceof MouseEvent)) return null; 
    var e = this[0] || window.event; 
    return e.buttons || e.which || e.button; 
}