jQuery: Phát hiện ép nút chuột trong sự kiện MouseMove

tôi đã cố gắng để phát hiện mà nút chuột -Nếu mở bất kỳ là người dùng nhấn trong một sự kiện MouseMove dưới jQuery, nhưng tôi nhận được kết quả rõ ràng:jQuery: Phát hiện ép nút chuột trong sự kiện MouseMove

no button pressed:  e.which = 1 e.button = 0 
left button pressed: e.which = 1 e.button = 0 
middle button pressed: e.which = 2 e.button = 1 
right button pressed: e.which = 3 e.button = 2

Mã :

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 

<input id="whichkey" value="type something"> 
<div id="log"></div> 
<script>$('#whichkey').bind('mousemove',function(e){ 
    $('#log').html(e.which + ' : ' + e.button); 
}); </script> 

</body> 
</html>

Làm cách nào để biết sự khác biệt giữa nút chuột trái và nút không có gì?

Nguồn

2010-11-01 Sebastián Grignoli

Vui lòng giải thích những gì bạn đang cố gắng làm tốt hơn. Nên mouseenter sau đó mousedown sau đó mouseup sau đó mouseexit kết quả trong không có nút? Điều gì về mousedown sau đó mouseenter sau đó mouseexit sau đó mouseup? Bạn có hỏi rằng nếu mousemove s trên đầu vào, thực tế là không có nút nào được nhấn được ghi lại? – Fresheyeball

Tôi đang cố đánh dấu văn bản trong trang. Mỗi từ nằm trong nhịp riêng của nó. Mouseover + nút bên trái trên một phần tử span nên làm nổi bật nó, di chuột qua + nút bên phải sẽ làm sáng tỏ nó. –

Bạn có thể viết một chút mã để theo dõi trạng thái của nút chuột trái và với một chức năng nhỏ, bạn có thể xử lý biến sự kiện trong sự kiện mousemove.

Để theo dõi trạng thái của LMB, liên kết sự kiện với cấp tài liệu cho mousedown và mouseup và kiểm tra e.which để đặt hoặc xóa cờ.

Quá trình xử lý trước được thực hiện bởi hàm tweakMouseMoveEvent() trong mã của tôi. Để hỗ trợ các phiên bản IE < 9, bạn phải kiểm tra xem các nút chuột đã được phát hành bên ngoài cửa sổ và xóa cờ nếu có. Sau đó, bạn có thể thay đổi biến sự kiện đã qua. Nếu e.which ban đầu là 1 (không có nút hoặc LMB) và trạng thái hiện tại của nút trái không được nhấn, chỉ cần đặt e.which thành 0 và sử dụng trong phần còn lại của sự kiện mousemove để kiểm tra không có nút nào được nhấn.

Trình xử lý mousemove trong ví dụ của tôi chỉ gọi hàm tinh chỉnh truyền biến sự kiện hiện tại qua, sau đó xuất kết quả giá trị e.which.

$(function() { 
    var leftButtonDown = false; 
    $(document).mousedown(function(e){ 
     // Left mouse button was pressed, set flag 
     if(e.which === 1) leftButtonDown = true; 
    }); 
    $(document).mouseup(function(e){ 
     // Left mouse button was released, clear flag 
     if(e.which === 1) leftButtonDown = false; 
    }); 

    function tweakMouseMoveEvent(e){ 
     // Check from jQuery UI for IE versions < 9 
     if ($.browser.msie && !e.button && !(document.documentMode >= 9)) { 
      leftButtonDown = false; 
     } 

     // If left button is not set, set which to 0 
     // This indicates no buttons pressed 
     if(e.which === 1 && !leftButtonDown) e.which = 0; 
    } 

    $(document).mousemove(function(e) { 
     // Call the tweak function to check for LMB and set correct e.which 
     tweakMouseMoveEvent(e); 

     $('body').text('which: ' + e.which); 
    }); 
});

Hãy thử một bản demo sống ở đây: http://jsfiddle.net/G5Xr2/

Nguồn

2011-05-30 21:15:34 DarthJDG

Cảm ơn, tôi không thể tìm ra lý do tại sao luôn 0 trong IE. –

giải pháp tốt đẹp. những gì về nếu có một sự kiện mousedown trên một yếu tố con? liệu sự kiện mousedown tài liệu vẫn sẽ bị sa thải? –

quên nó ... tôi đã thử nghiệm, và nó hoạt động như một nét duyên dáng –

jQuery bình thường hóa giá trị which để nó hoạt động trên tất cả các trình duyệt. Tôi đặt cược nếu bạn chạy kịch bản của bạn, bạn sẽ tìm thấy các giá trị e.button khác nhau.

Nguồn

2010-11-01 01:14:06 Mottie

Đó là những gì tôi nghĩ. Đáng buồn thay, 'which' không cho tôi biết nếu nút trái được nhấn hay không. –

Tôi nghĩ rằng một số sự kiện không xử lý dữ liệu nút như những người khác, hãy thử thêm một biến toàn cục và thay đổi giá trị của nó bằng sự kiện 'mousedown'. – Mottie

Đây là bản trình diễn: http://jsfiddle.net/Mottie/ubgLA/ – Mottie

Các biến này được cập nhật khi sự kiện mousedown (trong số những người khác) kích hoạt; bạn đang thấy giá trị còn lại từ sự kiện đó. Lưu ý rằng they are properties of that event, không phải của chuột chính nó:

Mô tả: Đối với khóa hoặc nút sự kiện, thuộc tính này chỉ ra nút hoặc phím cụ thể mà được nhấn.

Không có giá trị cho "không nhấn nút", vì sự kiện mousedown sẽ không bao giờ kích hoạt để cho biết rằng không có nút nào được nhấn.

Bạn sẽ phải giữ biến [boolean] toàn cầu của riêng mình và bật/tắt nó trên mousedown/mouseup.

Điều này sẽ chỉ hoạt động nếu cửa sổ trình duyệt tập trung khi nhấn nút, có nghĩa là chuyển đổi tiêu điểm giữa người dùng nhấn nút chuột và bắn mousemove sự kiện sẽ ngăn điều này hoạt động bình thường. Tuy nhiên, thực sự không có nhiều bạn có thể làm về điều đó.

Nguồn

2011-05-28 01:20:55

Đối với một số lý do, khi gắn vào mousemove sự kiện, tài sản event.which được thiết lập để 1 nếu nút sang trái hoặc không được nhấn.

tôi đã thay đổi để mousedown sự kiện và nó làm việc Ok:

trái: 1
giữa: 2
phải: 3

Dưới đây là một ví dụ làm việc: http://jsfiddle.net/marcosfromero/RrXbX/

Mã jQuery là:

$('p').mousedown(function(event) { 
    console.log(event.which); 
    $('#button').text(event.which); 
});

Nguồn

2011-06-01 02:46:32 marcosfromero

Hầu hết các trình duyệt (except Safari) *) bây giờ hỗ trợ MouseEvent.buttons tài sản (ghi chú: "nút s" số nhiều), mà là 1 khi nút chuột trái được nhấn:

$('#whichkey').bind('mousemove', function(e) { 
    $('#log').html('Pressed: ' + e.buttons); 
});

https://jsfiddle.net/pdz2nzon/2

*) thế giới đang tiến về phía trước:
https://webkit.org/blog/8016/release-notes-for-safari-technology-preview-43/
https://trac.webkit.org/changeset/223264/webkit/

Nguồn

2016-02-18 12:59:43 Sphinxxx

Câu trả lời này phải là câu trả lời được chấp nhận! Các trình duyệt từ các nhà cung cấp lười biếng có thể nhận trợ giúp từ: https://github.com/mikolalysenko/mouse-event – yckart

Để thêm câu trả lời này, những người khác không hoạt động. Đồng ý điều này nên được chấp nhận trả lời. – BoB3K

Tính đến ngày, các công trình sau đây trên Firefox 47, Chrome 54 và Safari 10.

$('#whichkey').bind('mousemove',function(e){ 
    if (e.buttons & 1 || (e.buttons === undefined && e.which == 1)) { 
     $('#log').html('left button pressed'); 
    } else if (e.buttons & 2 || (e.buttons === undefined && e.which == 3)) { 
     $('#log').html('right button pressed'); 
    } else { 
     $('#log').html('no button pressed'); 
    } 
});

Nguồn

2016-11-20 14:04:52

Đối với người dùng tìm kiếm giải pháp tương tự nhưng không có việc sử dụng JQuery, đây là một cách về cách tôi giải quyết vấn đề của mình:

canvas.addEventListener("mousemove", updatePosition_mouseNtouch); 

    function updatePosition_mouseNtouch (evt) { 
     // IF mouse is down THEN set button press flag 
     if(evt.which === 1) 
     leftButtonDown = true; 
     // If you need to detect other buttons, then make this here 
     // ... else if(evt.which === 2) middleButtonDown = true; 
     // ... else if(evt.which === 3) rightButtonDown = true; 
     // IF no mouse button is pressed THEN reset press flag(s) 
     else 
     leftButtonDown = false; 

     if (leftButtonDown) { 
     /* do some stuff */ 
     } 
    }

Tôi hy vọng điều này hữu ích đối với người tìm kiếm câu trả lời.

Nguồn

2017-05-14 22:25:46

jQuery: Phát hiện ép nút chuột trong sự kiện MouseMove

Trả lời

Các vấn đề liên quan