按键事件与点击事件

Question

我的眼睛坏了所以这个问题将特定于键盘事件。

当我为按钮的单击事件定义处理程序时，如下所示：

$("#button").on("click", function() {
    alert("clicked");
});

因为我不能使用鼠标（而且我认为大多数 Web 应用程序使用点击事件来执行 html 元素），我通过转到按钮并在其上按 enter 来测试此事件。事件成功触发。从那时起，我开始相信按下回车键会模拟对 html 元素的点击事件。我已经多次执行提交按钮，所以没有理由相信情况并非如此。

现在，我正在创建一个文本框，需要在访问时填充一个值。所以我这样做了：

$("#text").on("click", function() {
    alert("clicked");
});

但是，按回车键不再起作用，没有值出现。但是当其他人使用鼠标单击该元素时，事件会成功触发。

这是我正在处理的代码：

我正在使用 jquery-ui 的自动完成功能。我希望在用户进入文本框时填充文本框。我按回车进入...

$( "#tags" ).autocomplete({
    source: names,
    minLength: 0,
    select: function( event, ui ) {
        var index = names.indexOf($(this).prop("value"));
        $(this).val("");
        $("#selected").append("<li>"+names[index]+
        "<input type='hidden' id='id' value='"+ids[index]+"'/>"+
        "<a href=''>remove</a></li>");
        ids.splice(index, 1);
        names.splice(index, 1);
        return false;
    }
}).on("click", function(event) {
    $(this).autocomplete("search", $(this).val());
});

按回车键和单击鼠标真的有区别吗？我该怎么办？

Answer 1

捕获按键事件并测试 'enter' 是处理此问题的最佳方法。按钮在没有这个的情况下在输入时执行的原因是因为它们是 'submit'.

类型

Answer 2

基本上，在编辑框上触发 onClick 不是一个好主意，因为如果不付出更多努力，您将无法通过这种方式获得键盘替代品。
因为你像我一样是盲人（我从你的问题中推测），你可能正在使用一些屏幕阅读软件。在屏幕阅读器中，Enter 通常模拟鼠标点击但是。但是，例如 Windows 的 JAWS 增加了更多的灵活性，允许您调整按下 Enter 键时的操作：模拟鼠标单击或将 Enter 发送到系统。
所以，在你的情况下，我会制作一个按钮来触发你的 onClick 事件。

按键事件与点击事件

keypress event vs click event

javascript

jquery

events

screen-readers

jquery-ui-autocomplete