Различение мыши и клавиатуры при нажатии - PullRequest
Новая
       21

Различение мыши и клавиатуры при нажатии

23 голосов
/ 19 сентября 2011

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

<a href="" onclick="submitData(event, '2011-07-04')">Save</a>

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

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

function submitData(event, id)
{
    alert("key = "+event.keyCode + "  mouse button = "+event.button);
}

всегда возвращает «ключ = неопределенная кнопка мыши = 0»

Вы можете помочь?

Ответы [ 5 ]

11 голосов
/ 19 сентября 2011

Вы можете создать условие с помощью event.type

function submitData(event, id)
{
    if(event.type == 'mousedown')
    {
        // do something
        return;
    }
    if(event.type == 'keypress')
    {
        // do something else
        return;
    }
}

Примечание. Вам необходимо прикрепить событие, которое поддерживает оба типа событий. С JQuery это выглядело бы как $('a.save').bind('mousedown keypress', submitData(event, this));

Встроенный onClick="" не поможет вам, так как он всегда будет проходить это событие щелчка, так как оно так и попадает в ловушку.

РЕДАКТИРОВАТЬ : Вот рабочая демонстрация , чтобы доказать мой случай с собственным JavaScript: http://jsfiddle.net/AlienWebguy/HPEjt/

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

7 голосов
/ 27 января 2016

Может проверить, если event.screenX и event.screenY равны нулю. 

$('a#foo').click(function(evt) {
  if (evt.screenX == 0 && evt.screenY == 0) {
    window.alert('Keyboard click.');
  } else {
    window.alert('Mouse click.');
  }
});

Демонстрация на CodePen

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

Примечание. Одно место, которое я нашел с помощью этого метода, - Хром

5 голосов
/ 19 сентября 2011

Вы можете различить щелчок и нажатие клавиш, захват и удаление события нажатия, возникшего в момент нажатия клавиши: 

jQuery(function($) {
    $("a#foo").keydown(function() {
        alert("keyboard");
        return false;
    }).click(function() {
        alert("mouse");
        return false;
    })
})

http://jsfiddle.net/NuP2g/

4 голосов
/ 27 марта 2019

Вы можете использовать event.detail 

if(event.detail === 0) {
    // keypress
} else {
    // mouse event
}
0 голосов
/ 19 сентября 2011

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

...