javascript - 绑定(bind)单击键和输入键以实现辅助功能

Question

给定一个表单(请注意 tabindex 属性)

<form id="settings-form">
    <input type="text" />
    <input type="submit" />
    <a href="#" class="cancel-save" tabindex="0">cancel</a>
</form>

将操作绑定(bind)到取消按钮

$('#settings-form').find('.cancel-save').click(function(){ alert('CANCEL SAVE'); });

现在，当用户想要取消更改时，他只需单击“取消”按钮即可。但是，如果他使用 TAB 键导航，然后按 Enter 键，则不会出现警报。

是否有针对此类操作的“主事件”，以处理输入、单击、空格等，无论用户可能具有什么辅助功能，而无需转换 <a>进入<button> ？

Answer 1

要绑定(bind)到两者，您可以在 on() 方法的第一个参数中定义多个事件(在以空格分隔的列表中):

$('#settings-form').find('.cancel-save').on('keypress click',
    function(e){
        var eType = e.type;
        if (eType == 'click' || (eType == 'keypress' && e.which == 13)) {
            alert('CANCEL SAVE');
        }
    });

JS Fiddle proof-of-concept .

引用文献:

• on() .