Just a quick question, I seem to do this a lot:

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

        return false;
    }
});

Is there a quicker way to bind an 'action' listener to a button? I want to always ensure my buttons with event listeners fire on both clicks and the enter key...this seems like it'd be a fairly mon thing to want to do but found nothing on google. Any thoughts?

Thanks.

Just a quick question, I seem to do this a lot:

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

        return false;
    }
});

Is there a quicker way to bind an 'action' listener to a button? I want to always ensure my buttons with event listeners fire on both clicks and the enter key...this seems like it'd be a fairly mon thing to want to do but found nothing on google. Any thoughts?

Thanks.

• javascript
• jquery

4 Answers 4

The click event doesn't actually handle the keypress in every case, it's the button that is making the click event work. When you use a div with a tabindex attribute to make it keyboard accessible, the click handler will not trigger when you press 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);
        }
    };
}

So to answer the question, I don't think there is a better way (that works in every case) other than yoda2k's solution.

By binding it with click will do the job, no need for keep press. Example

You could create a second function which handles the additional logic and pass your function as a parameter:

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

If it's part of a form you could just listen for the "submit" event?