空格鍵按下錨點html元素不會觸發點擊事件。如何讓這發生？

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

我在頁面中有上述錨元素。這個樣式看起來像一個按鈕，所以將被視爲一個按鈕。問題如下。用戶不想用鼠標點擊它或到達它，但他會使用Tab鍵突出顯示此錨點元素，然後使用「空格鍵」或「返回」鍵點擊它。如果用戶點擊空格鍵或返回鍵，我應該可以調用JavaScript函數。我嘗試了onkeypress事件，這並沒有幫助。任何想法？空格鍵按下錨點html元素不會觸發點擊事件。如何讓這發生？

來源

2011-07-26 reddyvaribabu

首先：您的HTML存在問題。您正在使用A的簡短語法 - 這意味着文本實際上並不是A內容的一部分。許多瀏覽器不喜歡A標籤的簡短語法 - 不是你的錯，但我們的工作是比瀏覽器更寬容。

這裏的修正版本：

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

根據不同的瀏覽器和DOCTYPE，它是顯著的事件名稱是否是全小寫與否。只是要尋找的東西。

最後，默認情況下，您的onclick事件只會觸發點擊和回車 - 而不是空格鍵。許多瀏覽器將空格視爲下拉菜單。如果您確定要捕獲這個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中，您可以檢索被點擊/鍵入的元素等。

來源

2011-07-26 23:29:32 Tom

我並沒有注意到A標籤已經關閉了一次，而之後又有一個關閉。當第一次關閉時，它工作得很好... – reddyvaribabu

我沒有親自試過這樣做，但我敢打賭這是一個涉及多一點然後就設置超鏈接按鍵事件。

我想你需要做的是在處理文檔級別的按鍵，內檢查，看看你的超鏈接被集中，然後執行您想要的代碼是什麼。

它也值得從HTML分離點擊事件。

來源

2011-07-26 23:24:58 djlumley

同意此評論 - 上述功能無法可靠工作，因爲按鍵不是所有瀏覽器中的錨事件。如果此按鈕的樣式類似於按鈕，爲什麼不使用按鈕元素，該按鈕元素能夠正確接收按鍵事件？ – AlexGad

空格鍵按下錨點html元素不會觸發點擊事件。如何讓這發生？

回答

相關問題