Javascript 考虑可访问性的jQuery事件绑定-单击并按键

Javascript 考虑可访问性的jQuery事件绑定-单击并按键,javascript,jquery,Javascript,Jquery,只是一个简单的问题,我似乎经常这样做: $saveBtn.bind("click keypress", function(e) { if (e.type != "keypress" || e.keyCode == 13) { // Do something... return false; } }); 有没有更快的方法将“动作”侦听器绑定到按钮?我想总是确保我的事件监听器按钮在点击和回车键时都会启动……这似乎是一件很常见的事情,但在谷歌

只是一个简单的问题,我似乎经常这样做:

$saveBtn.bind("click keypress", function(e)
{
    if (e.type != "keypress" || e.keyCode == 13)
    {
        // Do something...

        return false;
    }
});
有没有更快的方法将“动作”侦听器绑定到按钮?我想总是确保我的事件监听器按钮在点击和回车键时都会启动……这似乎是一件很常见的事情,但在谷歌上什么也找不到。有什么想法吗


谢谢。

如果它是表单的一部分,您可以只收听“提交”事件?

通过将其与
绑定,单击
即可完成此任务,无需按住

您可以创建第二个函数来处理附加逻辑,并将函数作为参数传递:

function handleClickAndPress(myfunc)
{
    return function (e) {
        if (e.type != "keypress" || e.keyCode == 13) {
            myfunc(e);
        }
    };
}

$saveBtn.bind("click keypress", handleClickAndPress(function (e) {
    // do your stuff here
}));

click事件实际上并不是在任何情况下都能处理按键,它是使click事件工作的按钮。当使用带有tabindex属性的div使其可通过键盘访问时,按enter键时不会触发单击处理程序

HTML

仅单击提交
提交点击并按下​
jQuery

$("#click-only").click(function (e) {
    addToBody(); // Only works on click
});

$("#click-and-press").bind("click keypress", handleClickAndPress(function (e) {
    addToBody(); // Works on click and keypress
}));

function addToBody() {
    $("body").append($("<p/>").text("Submitted"));
}

function handleClickAndPress(myfunc) {
    return function (e) {
        if (e.type != "keypress" || e.keyCode == 13) {
            myfunc(e);
        }
    };
}
$(“#仅单击”)。单击(功能(e){
addToBody();//仅在单击时有效
});
$(“#单击并按”).bind(“单击键按”),handleClickAndPress(函数(e){
addToBody();//在单击和按键时工作
}));
函数addToBody(){
$(“正文”)。追加($(“

”)。文本(“已提交”); } 功能手柄ClickandPress(myfunc){ 返回函数(e){ 如果(e.type!=“keypress”| e.keyCode==13){ myfunc(e); } }; }


因此,为了回答这个问题,我认为除了yoda2k的解决方案之外,没有更好的方法(在任何情况下都有效)。

是的,在上面的示例中是这样,尽管此表单有多个提交按钮,所有这些按钮的行为都略有不同(如果用户启用了JS)。但我仍然在寻找一个更通用的解决方案。这实际上只适用于具有本机键盘支持的元素,比如标签、按钮标签等等——例如,这不适用于div标签。
$("#click-only").click(function (e) {
    addToBody(); // Only works on click
});

$("#click-and-press").bind("click keypress", handleClickAndPress(function (e) {
    addToBody(); // Works on click and keypress
}));

function addToBody() {
    $("body").append($("<p/>").text("Submitted"));
}

function handleClickAndPress(myfunc) {
    return function (e) {
        if (e.type != "keypress" || e.keyCode == 13) {
            myfunc(e);
        }
    };
}