开发者

jQuery event binding with accessibility in mind - click and keypress

开发者 https://www.devze.com 2023-02-19 01:39 出处:网络
Just a quick question, I seem to do this a lot: $saveBtn.bind(\"click keypress\", function(e) { if (e.type != \"keypress\" || e.keyCode == 13)

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 common thing to want to do but found nothing on google. Any thoughts?

Th开发者_高级运维anks.


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?

0

精彩评论

暂无评论...
验证码 换一张
取 消