2

给定一个表格（请注意tabindex属性）

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

将操作绑定到取消按钮

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

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

这种操作是否有一个“主事件”来处理输入、点击、空格等，无论用户可能拥有什么可访问性功能，而无需将其<a>转换为<button>?

4

2 回答 2

3

要绑定到两者，您可以在方法的第一个参数中定义多个事件（在空格分隔的列表中）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 概念验证。

参考：

于 2012-07-14T00:36:24.007 回答
1

取消按钮有什么作用？如果它的目的是重置表单中的值，那么您应该真正使用 HTML 输入类型的 reset 来代替，以便它适用于非 JS 用户：

如果你想给 JS 用户更丰富的体验，那么你可以绑定到表单重置事件并使用 prevent default，但非 JS 用户仍然可以获得预期的行为。一般来说，一个没有 JavaScript 什么都不做的锚可能会更好地实现（或者至少通过 JavaScript 注入），特别是如果你关心可访问性。

<form id="theForm">
    <input type="text" value=""/>
    <input type="submit" value=""/>
    <input type="reset" value="Cancel"/>
</form>

$("#theForm").bind("reset", function(e) {
    e.preventDefault();
    //Fancy reset handler
});

默认情况下，这应该包括鼠标、键盘或触摸交互，因为您绑定到表单事件。

于 2012-07-14T17:10:10.567 回答