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

Ответ 1

В отношении решения Pax: он не работает, если пользователь нажимает несколько кнопок преднамеренно или случайно. Не спрашивайте меня, как я знаю: - (.

Правильный код должен быть таким:

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

С тестом следующим образом:

if(mouseDown){
  // crikey! isn't she a beauty?
}

Если вы хотите знать, какая кнопка нажата, будьте готовы сделать mouseDown массив счетчиков и посчитать их отдельно для отдельных кнопок:

// let pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
    mouseDownCount = 0;
document.body.onmousedown = function(evt) { 
  ++mouseDown[evt.button];
  ++mouseDownCount;
}
document.body.onmouseup = function(evt) {
  --mouseDown[evt.button];
  --mouseDownCount;
}

Теперь вы можете проверить, какие кнопки были нажаты точно:

if(mouseDownCount){
  // alright, let lift the little bugger up!
  for(var i = 0; i < mouseDown.length; ++i){
    if(mouseDown[i]){
      // we found it right there!
    }
  }
}

Теперь следует предупредить, что приведенный выше код будет работать только для совместимых со стандартом браузеров, которые передают вам номер кнопки, начиная с 0 и выше. IE использует битовую маску текущих нажатых кнопок:

• 0 для "ничего не нажата"
• 1 для левой
• 2 для правой
• 4 для средних
• и любую комбинацию выше, например, 5 для левой + средней

Поэтому настройте свой код соответственно! Я оставляю это как упражнение.

И помните: IE использует глобальный объект события, называемый & hellip; "Событие".

Кстати, у IE есть функция, полезная в вашем случае: когда другие браузеры отправляют "button" только для событий кнопки мыши (onclick, onmousedown и onmouseup), IE отправляет ее также с помощью onmousemove. Таким образом, вы можете начать слушать onmousemove, когда вам нужно знать состояние кнопки, и проверить на evt.button, как только вы его получите; теперь вы знаете, какие кнопки мыши были нажаты:

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

Конечно, вы ничего не получаете, если она играет мертвым и не двигается.

Соответствующие ссылки:

• Кнопка MouseEvent (DOM 2)
• Кнопка MSDN

Обновление # 1: я не знаю, почему я перенес код document.body-style. Лучше присоединить обработчики событий непосредственно к документу.

Ответ 2

Это старый вопрос, и ответы здесь в основном направлены на то, чтобы использовать mousedown и mouseup чтобы отслеживать, нажата ли кнопка. Но, как указывали другие, mouseup будет срабатывать только при выполнении в браузере, что может привести к потере состояния кнопки.

Однако MouseEvent (теперь) указывает, какие кнопки в настоящее время нажаты:

• Для всех современных браузеров (кроме Safari) используйте MouseEvent.buttons
• Для Safari, используйте MouseEvent.which (buttons будут неопределенными для Safari) Примечания: which использует различные номера из buttons для правых и средних щелчков.

Когда он зарегистрирован в document, mousemove будет немедленно срабатывать, как только курсор снова появится в браузере, поэтому, если пользователь выйдет извне, состояние будет обновлено, как только они вернутся обратно.

Простая реализация может выглядеть так:

var leftMouseButtonOnlyDown = false;

function setLeftButtonState(e) {
  leftMouseButtonOnlyDown = e.buttons === undefined 
    ? e.which === 1 
    : e.buttons === 1;
}

document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;

Если требуются более сложные сценарии (разные кнопки/несколько кнопок/клавиши управления), ознакомьтесь с документами MouseEvent. Когда/если Safari поднимает свою игру, это должно стать проще.

Ответ 3

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

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

а затем, в вашем коде:

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

Ответ 4

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

единственным хорошим решением является использование объекта IE.event.

Ответ 5

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

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

Активный селектор управляет щелчком мыши намного лучше, чем мышь вверх/вниз, вам просто нужен способ чтения этого состояния в событии onmousemove. Для этого мне нужно было обмануть и полагаться на то, что курсор по умолчанию "авто", и я просто изменяю его на "по умолчанию", что по умолчанию выбирается автоматически.

Вы можете использовать что-либо в объекте, который возвращается getComputedStyle, который вы можете использовать как флаг, не нарушая внешний вид вашей страницы, например. границы цвета.

Мне бы хотелось установить свой собственный пользовательский стиль в разделе: active, но я не мог заставить это работать. Было бы лучше, если бы это было возможно.

Ответ 6

Следующий фрагмент попытается выполнить функцию "doStuff" через 2 секунды после события mouseDown в документе document.body. Если пользователь поднимет кнопку, произойдет событие mouseUp и отменит отложенное выполнение.

Я бы посоветовал использовать какой-либо метод для привязки к кросс-браузеру - настройка явных свойств mousedown и mouseup была сделана для упрощения примера.

function doStuff() {
  // does something when mouse is down in body for longer than 2 seconds
}

var mousedownTimeout;

document.body.onmousedown = function() { 
  mousedownTimeout = window.setTimeout(doStuff, 2000);
}

document.body.onmouseup = function() {
  window.clearTimeout(mousedownTimeout);
}

Ответ 7

Короткий и сладкий

Я не уверен, почему ни один из предыдущих ответов не работал у меня, но я придумал это решение в момент эврики. Он не только работает, но и является самым элегантным:

Добавить в тег тела:

onmouseup="down=0;" onmousedown="down=1;"

Затем проверьте и выполните myfunction(), если down равно 1:

onmousemove="if (down==1) myfunction();"

Ответ 8

Вы можете комбинировать @Pax и мои ответы, чтобы также получить продолжительность, в течение которой мышь была недоступна:

var mousedownTimeout,
    mousedown = 0;

document.body.onmousedown = function() {
  mousedown = 0; 
  window.clearInterval(mousedownTimeout);
  mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}

document.body.onmouseup = function() {
  mousedown = 0;
  window.clearInterval(mousedownTimeout);
}

Затем позже:

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

Ответ 9

Вам нужно обработать MouseDown и MouseUp и установить некоторый флаг или что-то отслеживать его "позже по дороге"...: (

Ответ 10

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

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

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

Ответ 11

Ниже примера 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();
});

Ответ 12

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

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

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

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

• Пользователь
• одновременно нажимает клавишу клавиатуры и кнопку мыши, отпускает кнопку мыши за пределами окна браузера, а затем отпускает ключ.
• Пользователь одновременно нажимает кнопки две мыши, выпускает одну кнопку мыши, а другую - за пределами окна браузера.

Ответ 13

Если вы работаете на сложной странице с существующими обработчиками событий мыши, я бы рекомендовал обработать событие на захвате (вместо пузыря). Для этого просто установите третий параметр addEventListener в true.

Кроме того, вы можете проверить event.which, чтобы убедиться, что вы обрабатываете фактическое взаимодействие с пользователем, а не события мыши, например. elem.dispatchEvent(new Event('mousedown')).

var isMouseDown = false;

document.addEventListener('mousedown', function(event) { 
    if ( event.which ) isMouseDown = true;
}, true);

document.addEventListener('mouseup', function(event) { 
    if ( event.which ) isMouseDown = false;
}, true);

Добавление обработчика в документ (или окно) вместо document.body важно b/c, он гарантирует, что события mouseup за пределами окна все еще записаны.

Ответ 14

Используя API MouseEvent, чтобы проверить нажатую кнопку, если есть:

document.addEventListener('mousedown', (e) => console.log(e.buttons))

Ответ 15

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

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

Ответ 16

        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;
        }

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