在錨點html元素上按空格鍵不會觸發click事件。 如何使這種情況發生？

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觸發，而不對空格鍵觸發。 許多瀏覽器都將空格鍵視為Pagedown。 如果確定要在此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分開也是值得的。