Question

只是一个简单的问题，我似乎做了很多：

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

        return false;
    }
});

是否有更快捷的方法将“动作”侦听器绑定到按钮？我希望始终确保我的按钮与事件监听器同时触发点击和输入键...这似乎是一个相当普遍的事情想要做但在谷歌上找不到任何东西。有什么想法吗？

感谢。

Answer 1

通过将其与click绑定将完成工作，无需继续按下。 Example

Answer 2

在每种情况下，click事件实际上并不处理按键，它是使点击事件有效的按钮。当您使用具有tabindex属性的div使其可以访问键盘时，按Enter键时不会触发单击处理程序。

HTML

<div id="click-only" tabindex="0">Submit click only</div>
<div id="click-and-press" tabindex="0">Submit click and press</div>

的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);
        }
    };
}

所以回答这个问题，我认为除了yoda2k的解决方案之外，还有更好的方法（在每种情况下都有效）。

Answer 3

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

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

Answer 4

如果它是表单的一部分，您可以只听取“提交”事件吗？

jQuery事件绑定与可访问性的想法 - 单击和按键

4 个答案: