锚点html元素上的空格键按键不会触发点击事件.怎么让这件事发生？

Question

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"/><span>Save & Add Another</span></a>

我的页面中有上面的锚元素.这个样式看起来像一个按钮,因此将被视为一个按钮.问题如下.用户不想使用鼠标点击它或到达它,但他将使用标签突出显示此锚元素,然后使用"空格键"或"返回"键点击它.如果用户点击空格键或返回键,我应该能够调用JavaScript函数.我尝试了onkeypress事件,这没有帮助.任何的想法？

Answer 1

第一:HTML存在问题.您正在使用短语法A- 意味着文本实际上不是A内容的一部分.许多浏览器不喜欢A标签的短语法 - 不是你的错,但我们的工作是比浏览器更宽容.

这是更正后的版本:

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"><span>Save & Add Another</span></a>

根据浏览器和DOCTYPE,事件名称是否全部小写都很重要.只是寻找的东西.

最后,默认情况下,您的onclick事件只会触发点击和Enter - 而不是空格键.许多浏览器将空格键视为向下翻页的内容.如果您确定要在此处捕获空格键事件A并将其视为Enter,则需要定义一个查找空格键的按键事件.像这样:

function addNewKeys(event) {
    if(!event) var event = window.event; // cross-browser shenanigans
    if(event.keyCode === 32) { // this is the spacebar
        saveTdsAddNew(event);
    }
    return true; // treat all other keys normally;
}

(记得把这个新函数绑定到那个onkeypress A.)

请注意,我正在传递event给saveTdsAddNew函数.那是因为我认为事件处理程序通常会将event对象作为参数接收,因此这会保留现有模式.从中event,您可以检索被点击/键入的元素等.