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

（请记住将此新函数绑定到A的onkeypress。）

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

Answer 2

我没有亲自尝试过这样做，但是我打赌它更多涉及到只是在超链接上设置一个按键事件。

我想你需要做的是在文档级别处理按键，在该检查中查看你的超链接是否已被聚焦，然后执行你想要的代码。

还值得从HTML中分离点击事件。

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

2 个答案: