按键事件与点击事件答案

【问题标题】：keypress event vs click event按键事件与点击事件
【发布时间】：2017-01-03 17:00:19
【问题描述】：

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

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

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

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

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

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

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

这是我正在处理的代码：

我正在使用 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());
});

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

【问题讨论】：

我相信这对于像按钮这样的可点击元素来说是正确的，但是在文本框中，输入具有不同的含义，即返回。空格键也可以作为点击的替代品。
提交按钮具有“默认”状态，因此当用户点击时会被“点击”。如果您添加“提交”按钮，它将按预期工作。

标签： javascript jquery events jquery-ui-autocomplete screen-readers

【解决方案1】：

捕获按键事件并测试“输入”是处理此问题的最佳方法。按钮在输入时执行而不执行此操作的原因是它们属于“提交”类型。

【讨论】：

我已经编辑了我的问题以包含我的代码的真实部分。我是否为站点用户正确处理了点击事件？关于键盘，我只需要绑定一个按键事件并检查输入键对吗？
我对jquery不太好，所以不能直接回答第一部分，但就第二部分而言，绑定按键和检查应该没问题

【解决方案2】：

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

【讨论】：