JavaScript: проверить, нажата ли кнопка мыши? - PullRequest
Новая
       74

JavaScript: проверить, нажата ли кнопка мыши?

120 голосов
/ 27 ноября 2008

Есть ли способ определить, не нажата ли в данный момент кнопка мыши в JavaScript?

Я знаю о событии "mousedown", но это не то, что мне нужно. Через некоторое время после нажатия кнопки мыши я хочу определить, нажата ли она по-прежнему.

Возможно ли это?

Ответы [ 15 ]

0 голосов
/ 20 сентября 2017

Как сказал @Jack, когда mouseup происходит за пределами окна браузера, мы не знаем об этом ...

Этот код (почти) работал для меня: 

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

К сожалению, я не получу событие mouseup в одном из этих случаев:

  • Пользователь одновременно нажимает клавишу клавиатуры и кнопку мыши, отпускает кнопку мыши за пределами окна браузера и затем отпускает клавишу.
  • пользователь нажимает две кнопки мыши одновременно, отпускает одну кнопку мыши, а затем другую, обе за пределами окна браузера.
0 голосов
/ 25 июня 2015

Ниже примера jQuery, когда мышь превышает $ ('. Element'), цвет меняется в зависимости от того, какая кнопка мыши нажата. 

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});
0 голосов
/ 05 января 2014

Используя jQuery, следующее решение обрабатывает даже «перетащить страницу, а затем освободить регистр». 

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

Я не знаю, как он обрабатывает несколько кнопок мыши. Если бы был способ запустить щелчок за пределами окна, а затем ввести мышь в окно, то это, вероятно, также не будет работать должным образом.

0 голосов
/ 04 июля 2013 
        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

эта кросс-браузерная версия отлично работает для меня.

0 голосов
/ 27 ноября 2008

Что ж, вы не можете проверить, не работает ли он после события, но вы можете проверить, что он работает ... Если он работает ... это означает, что он больше не работает: P lol

Таким образом, пользователь нажимает кнопку вниз (событие onMouseDown) ... и после этого вы проверяете, работает ли он (onMouseUp). Пока он не работает, вы можете делать то, что вам нужно.

Страница:
...