Question

如果我 keydown 输入键盘键，您是否可以确认A或BUTTON元素上的点击事件也会被触发？我在这里尝试过： http://jsfiddle.net/w5z2xa3h/1/

我可以将此默认行为更改为 keyup 而非 keydown 吗？

Answer 1

如果密钥为 ENTER ，则可以阻止keydown事件的默认行为。但是你需要存储一些信息（被称为的元素），这样你就可以在keyup上模拟它的点击：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：按 ENTER 后，只有在按住键的情况下才能延迟点击。如果您希望能够取消单击，则可以添加另一个keydown事件侦听器，例如，将 ESCAPE 键设置为awaitingClick到null 。这样当你键入 ENTER 时，由于awaitingClick设置为null，因此不会点击模拟该元素：

＆＃13;

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

＆＃13;

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

＆＃13;

通过输入keyup而不是keydown触发的Javascript click事件

1 个答案: