Событие клика в Javascript, запускаемое вводом keyup вместо keydown

Question

Событие клика в Javascript, запускаемое вводом keyup вместо keydown

1

Можете ли вы подтвердить, что событие щелчка на элементе A или BUTTON запускается также, если я нажимаю клавишу клавиатуры ENTER? Я попробовал это здесь: http://jsfiddle.net/w5z2xa3h/1/

Могу ли я перейти этот по умолчанию behavour в KeyUp вместо KeyDown?

Tobia 16 сен. 2017, в 11:59

Источник

0

Да, это действительно событие click, и просмотр объекта события не показывает ничего, отличного от щелчка мышью. Так что, кажется, нет ничего, что вы могли бы использовать, чтобы отличить событие.
Nisarg 16 сен. 2017, в 09:51
0

Если по какой-то причине вас это беспокоит, вы можете попробовать установить индекс табуляции на -1 . Это должно препятствовать тому, чтобы элемент A получил фокус через табуляции.
Nisarg 16 сен. 2017, в 09:52

Теги:

javascript

javascript-events

onclick

1 ответ

Ещё вопросы

Да, это действительно событие click, и просмотр объекта события не показывает ничего, отличного от щелчка мышью. Так что, кажется, нет ничего, что вы могли бы использовать, чтобы отличить событие.
Если по какой-то причине вас это беспокоит, вы можете попробовать установить индекс табуляции на -1 . Это должно препятствовать тому, чтобы элемент A получил фокус через табуляции.

ibrahim mahrir · Answer 1 · 2017-09-16T10-42-00.000Z

Вы можете предотвратить поведение по умолчанию keydown случае, если ключ ENTER. Но вам нужно сохранить некоторую информацию (элемент с ключом), чтобы вы могли имитировать щелчок на keyup:

$(function() {
    setTimeout(function(){$("a")[0].focus();},1000);
});

$(document).on("click", ".alert", function(e) {
    $("body").append('<div>Click fired!</div>');
});



var awaitingClick = null;                               // used to keep track of the element that been keydowned (also used to check if there is an element)
$(document).on("keydown", ".alert", function(e) {       // when a keydown on .alert element happens
    if(e.keyCode === 13) {                              // if the key is Enter (keyCode of 13)
        awaitingClick = $(this);                        // store this element (to be click-simulated on keyup)
        e.preventDefault();                             // prevent the default behavior (clicking the element)
    }
});

$(document).on("keyup", function(e) {                   // when a keyup event occur (no need to specify .alert element as that is unnecessary)
    if(awaitingClick) {                                 // if awaitingClick isn't null (there is an element awaiting to be clicked as it has been keydowned by Enter)
        awaitingClick.click();                          // then simulate a click on it
        awaitingClick = null;                           // and awaiting no more!!!
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="alert" href=#>Tab and focus here and push and maintain ENTER pushed!</a></p>

Примечание. Когда вы нажмете ENTER, вы можете только отложить клик до тех пор, пока вы держите клавишу нажатой. Если вы хотите, чтобы иметь возможность отменить щелчок, вы можете добавить еще один keydown слушателя событий для, например, клавиша ESCAPE, который устанавливает awaitingClick к null. Таким образом, при нажатии клавиши ENTER элемент не будет отображаться по клику, так как awaitingClick имеет значение null:

$(function() {
    setTimeout(function(){$("a")[0].focus();},1000);
});

$(document).on("click", ".alert", function(e) {
    $("body").append('<div>Click fired!</div>');
});



var awaitingClick = null;
$(document).on("keydown", ".alert", function(e) {
    if(e.keyCode === 13) {
        awaitingClick = $(this); 
        e.preventDefault();
    }
    if(e.keyCode === 27) {                              // if ESCAPE is pressed
        awaitingClick = null;                           // then mission abort (set awaitingClick to null that way when keyup happens the click won't be simulated)
    }
});

$(document).on("keyup", function(e) {
    if(awaitingClick) {                                 // awaitingClick could be set to null before keyup of ENTER had happened (in that case no click is simulated)
        awaitingClick.click();
        awaitingClick = null;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Press <kbd>ENTER</kbd>, keep it down, and then press <kbd>ESCAPE</kbd> to cancel the click by <kbd>ENTER</kbd></strong><br>
<p><a class="alert" href=#>Tab and focus here and push and maintain ENTER pushed!</a></p>