jQuery: обнаружение нажатой кнопки мыши во время события перемещения мыши - PullRequest
Новая
       10

jQuery: обнаружение нажатой кнопки мыши во время события перемещения мыши

67 голосов
/ 01 ноября 2010

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

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

Код: 

<!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>

Как определить разницу между нажатой левой кнопкой мыши и отсутствием кнопки вообще?

Ответы [ 7 ]

57 голосов
/ 31 мая 2011

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

Чтобы отслеживать состояние LMB, свяжите событие с уровнем документа для mousedown и mouseup и проверьте, чтобы e.which установил или снял флажок.

Предварительная обработка выполняется функцией tweakMouseMoveEvent() в моем коде. Для поддержки версий IE <9 вы должны проверить, были ли кнопки мыши отпущены за пределы окна, и снять флажок, если это так. Затем вы можете изменить переданную переменную события. Если <code>e.which изначально был 1 (без кнопки или ЛКМ) и текущее состояние левой кнопки не было нажато, просто установите e.which на 0 и используйте это в оставшейся части события mousemove, чтобы проверить кнопки не нажимаются.

Обработчик mousemove в моем примере просто вызывает функцию настройки, пропуская текущую переменную события, а затем выводит значение 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);
    });
});

Попробуйте демо-версию здесь: http://jsfiddle.net/G5Xr2/

19 голосов
/ 18 февраля 2016

Большинство браузеров (, за исключением Safari ) *) теперь поддерживают свойство MouseEvent.buttons (примечание: множественное число «кнопка с »), которое равно 1 при нажатии левой кнопки мыши : 

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

https://jsfiddle.net/pdz2nzon/2

*) Мир движется вперед:
https://webkit.org/blog/8016/release-notes-for-safari-technology-preview-43/
https://trac.webkit.org/changeset/223264/webkit/

6 голосов
/ 01 июня 2011

По какой-то причине при привязке к событию mousemove свойство event.which устанавливается на 1, если нажата левая кнопка или ни одна не нажата.

Я изменил на событие mousedown, и оно заработалоОК:

  • слева: 1
  • в середине: 2
  • справа: 3

Вот рабочий пример: http://jsfiddle.net/marcosfromero/RrXbX/

Код jQuery: 

$('p').mousedown(function(event) {
    console.log(event.which);
    $('#button').text(event.which);
});
6 голосов
/ 01 ноября 2010

jQuery нормализует значение which, поэтому оно будет работать во всех браузерах. Бьюсь об заклад, если вы запустите свой скрипт, вы найдете различные значения e.button.

2 голосов
/ 28 мая 2011

Эти переменные обновляются при возникновении события mousedown (среди прочего); вы видите значение, которое остается от этого события. Обратите внимание, что это свойства этого события , а не самой мыши:

Описание: Для событий клавиш или кнопок этот атрибут указывает конкретную кнопку или нажатую клавишу.

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

Вам нужно будет сохранить собственную глобальную переменную [boolean] и включить / выключить ее при mousedown / mouseup.

  • Это будет работать только в том случае, если окно браузера было сфокусировано при нажатии кнопки, что означает переключение фокуса между пользователем, нажимающим кнопку мыши и срабатыванием вашего события mousemove, которое будет препятствовать нормальной работе. Тем не менее, на самом деле вы ничего не можете с этим поделать.
1 голос
/ 20 ноября 2016

На сегодняшний день на Firefox 47, Chrome 54 и 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');
    }
});
0 голосов
/ 15 мая 2017

Для пользователей, которые ищут подобное решение, но без использования JQuery, вот способ решения моей проблемы: 

    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 */
      }
    }

Я надеюсь, что это полезно для тех, кто ищет ответ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...