JavaScript: Перевірте, чи натиснута кнопка миші?

Чи є спосіб виявити, чи в даний момент кнопка миші в JavaScript відсутня?

Я знаю про подію "mousedown", але це не те, що мені потрібно. Деякий час ПІСЛЯ натискання кнопки миші я хочу мати можливість виявити, чи вона все ще натиснута вниз.

Чи можливо це?

Щодо рішення Pax: воно не працює, якщо користувач навмисно чи випадково натискає більше однієї кнопки. Не запитуйте мене, як я знаю :-(

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

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

З таким тестом:

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

Якщо ви хочете знати, яка кнопка натиснута, будьте готові зробити mouseDown масивом лічильників і рахувати їх окремо для окремих кнопок:

// let's 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's 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 використовує глобальний об'єкт події, який називається ... "подія".

Між іншим, у IE є функція, корисна у вашому випадку: коли інші браузери надсилають "кнопку" лише для подій кнопки миші (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. Краще буде приєднати обробників подій безпосередньо до документа.

Це старе питання, і відповіді тут, здається, в основному виступають за використання 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 підніме свою гру, це має стати простішим.

Я думаю, що найкращим підходом до цього є збереження власного запису про стан кнопки миші таким чином:

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

рішення не добре. можна було б "замурувати" документ, потім "мишати" поза веб-переглядачем, і в цьому випадку браузер все ще думає, що миша вниз.

єдине хороше рішення - використання об'єкта IE.event.

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

<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. Для цього мені потрібно було обдурити і покладатися на той факт, що курсор за замовчуванням є "auto", і я просто змінюю його на "default", саме це автоматично вибирає за замовчуванням.

Ви можете використовувати будь-що в об'єкті, який повертається getComputedStyle, який ви можете використовувати як прапор, не порушуючи зовнішній вигляд сторінки, наприклад, колір межі.

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

Наступний фрагмент спробує виконати функцію "doStuff" через 2 секунди після події mouseDown у документі document.body. Якщо користувач підніме кнопку, відбудеться подія mouseUp та скасує затримку виконання.

Я б радив використовувати якийсь метод для вкладення подій між веб-переглядачами - встановлення властивостей mousedown та миші явно робилося для спрощення прикладу.

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

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

Я не впевнений, чому жодна з попередніх відповідей не працювала для мене, але я придумав це рішення в момент еврики. Це не тільки працює, але і є найелегантнішим:

Додати до тегу тіла:

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

Потім тестуйте та виконайте, myfunction()якщо downдорівнює 1:

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

Ви можете поєднати @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
}

Вам потрібно обробити MouseDown і MouseUp і встановити прапор чи щось, щоб відстежувати його "пізніше вниз по дорозі" ... :(

Якщо ви працюєте на складній сторінці з існуючими обробниками подій миші, рекомендую обробляти подію під час зйомки (замість бульбашки). Для цього просто встановіть 3-й параметр 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, це гарантує, що події миші поза вікном все ще записуються.

Використовуючи MouseEvent api, щоб перевірити натиснуту кнопку, якщо така є:

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

Повернення :

Число, що представляє одну або кілька кнопок. Для більш ніж однієї кнопки, натиснутої одночасно, значення поєднуються (наприклад, 3 первинне + вторинне).

0 : No button or un-initialized
1 : Primary button (usually the left button)
2 : Secondary button (usually the right button)
4 : Auxilary button (usually the mouse wheel button or middle button)
8 : 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)

Використовуючи jQuery, наступне рішення обробляє навіть "перетягнути сторінку, а потім випустити".

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

Я не знаю, як він обробляє декілька кнопок миші. Якби був спосіб запустити клацання поза вікном, а потім принести мишку до вікна, то, ймовірно, і там не працюватиме належним чином.

Нижче прикладу jQuery, коли миша перевищує $ ('. Елемент'), колір змінюється залежно від того, яку кнопку миші натискають.

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

Як сказав @Jack, коли mouseupце відбувається поза вікном браузера, ми про це не знаємо ...

Цей код (майже) працював для мене:

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

На жаль, я не отримаю mouseupподію в одному з таких випадків:

• Користувач одночасно натискає клавішу клавіатури та кнопку миші, відпускає кнопку миші поза вікном браузера, після чого відпускає клавішу.
• користувач натискає дві кнопки миші одночасно, відпускає одну кнопку миші, а потім іншу, обидві за межами вікна браузера.

Ну, ви не можете перевірити, чи він після події вниз, але ви можете перевірити, чи не вгору ... Якщо це вгору .. це означає, що більше не вниз: P lol

Таким чином, користувач натискає кнопку вниз (подія onMouseDown) ... і після цього ви перевіряєте, чи не працює (onMouseUp). Хоча це ще не вгору, ви можете робити все, що вам потрібно.

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

ця версія браузера для мене працює чудово.