Дифференциация между нажатием мыши и клавиатуры onclick

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

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

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

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

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

всегда возвращает "key = undefined кнопка мыши = 0"

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

Ответ 1

Вы можете создать условие с помощью 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));

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

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

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

Ответ 2

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

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

http://jsfiddle.net/NuP2g/

Ответ 3

Можно проверить, нет ли 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

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

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

Ответ 4

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