所以我正在做一個項目，需要一個& ltdiv & gt使用onclick事件。我已經讓主要功能正常工作，但是還有一個問題。我需要onclick事件在用戶跳轉到& ltdiv & gt并按回車鍵。我在& ltdiv & gt這允許它獲得焦點，但是當用戶按enter(或任何其他鍵)時，什么都不會發生。

有人能幫我嗎？還是我想要的根本不可能？

這里有一個jsfiddle演示了我的問題。 http://jsfiddle.net/logiwan992/suwq7r09/

提前感謝您的幫助。

我注意到問題的標簽是WCAG和“可及性”。

因此，你的問題的答案是“不要那樣做”這一頁上的其他答案對每個人來說都很好，除了需要它工作的人，即使用屏幕閱讀器或其他輔助技術的人。這里基于javascript的解決方案都不符合WCAG標準。

你想要的是一個& ltbutton & gt。這給了你免費的tabindex和鍵盤控制。

也可以強制a & ltdiv & gt像一個& ltbutton & gt通過添加ARIA標記(盡管使用已經做了您需要它做的事情的標記更好也更容易。)

如果絕對有必要的話，這里有一個關于使用ARIA實現偽按鈕的很好的介紹: https://developer . Mozilla . org/en-US/docs/Web/Accessibility/ARIA/ARIA _ Techniques/Using _ the _ button _ role

其要點是，您需要添加role="button "屬性，并手動管理aria-pressed屬性的狀態(通過在javascript中捕獲關鍵事件和點擊；其他答案已經非常全面地涵蓋了這一點，所以我不會重復細節)

有一個& lt如果您指定了正確的ARIA標簽、角色和鍵盤事件，就可以像按鈕一樣工作。這就是詠嘆調的全部意義。

不過，我同意，如果可能的話，你應該使用原生的html元素。這是使用詠嘆調的第一條規則——http://www.w3.org/TR/aria-in-html/#在html中使用詠嘆調。但我知道這并不總是可能的。

提到了使用focus()。不正確。Focus()用于將焦點移動到對象上。它不是用來處理事件的。現在，也許他們指的是onFocus()，這是一個當對象獲得焦點時觸發的事件，但這仍然不是陷阱的正確事件。你不想要一個按鈕(無論是作為& ltdiv >或a & ltbutton >)來執行它的功能。用戶必須點擊或按下回車鍵/空格鍵。

請查看定義按鈕鍵盤行為的創作實踐，http://www.w3.org/TR/wai-aria-practices/#button,，以及討論鍵盤事件的部分，特別是http://www.w3.org/TR/wai-aria-practices/#focus_tabindex.，請注意不要依賴按鍵。并非所有瀏覽器都發送該事件。

任何時候你按下一個鍵，三個可能的事件會發生:Keydown，keypress，keyup。所有瀏覽器都支持Keydown和keyup，并且可以訪問event.keyCode。某些瀏覽器支持Keypress，并且可以訪問event.charCode。

keyCode和charCode之間有很大的不同，尤其是當您試圖實現Ctrl+/這樣的快捷鍵時。許多非美式鍵盤在鍵盤的不同位置有特殊的鍵，你會得到不同的鍵碼。但那是另一個討論的話題。

嘗試在上述div上綁定keypress事件，并檢測是否按下了Enter鍵(代碼編號為13)。

var div = document.getElementsByTagName('div');
div[0].addEventListener('keypress', function(e) {
    if(e.keyCode == 13) {
        alert('div focused');   
    }
});

工作小提琴

或者，您也可以使用jQuery:

jQuery(function($) {

    $('div').on('keypress', function(e) {
        if(e.keyCode == 13) {
            alert('div focused'); 
        }
    });

});

工作小提琴

“onclick”屬性在鏈接上有特定的行為，因為它可以用enter鍵觸發。

看到下面WCAG的失敗: http://www.w3.org/TR/WCAG20-TECHS/F59.html

你必須注意元素的“角色”。

下一頁說明了如何從“span”創建“可訪問鏈接”: https://developer . Mozilla . org/en-US/docs/Web/Accessibility/ARIA/ARIA _ Techniques/Using _ the _ link _ role

此外，如前所述，最好的方法是盡可能依賴按鈕/元素。

賦予元素role = & quot按鈕& quottabindex = & quot0 & gt；讓它可以聚焦。然后檢測任何聚焦/活動按鈕上的回車或空格。把它變成一個點擊。

下面是html和jquery代碼。您只需添加一次，它適用于所有role=button元素。

<div role="button" tabindex="0">Do that thing</div>

$("body").on("keypress","[role='button']", function(e) { 
     if(e.keyCode == 13 || e.keyCode == 32){ // 13=enter, 32=spacebar
         $(this).click();
         return false;
     }
})

我實際上是這樣做的，而不是使用適當的& ltbutton & gt元素。它避免了必須處理覆蓋瀏覽器按鈕樣式。它似乎也很常見，例如看看Gmail這么多可點擊的圖標、設置和導航按鈕，卻沒有一個& ltbutton & gt在望。

對兩個事件使用相同的事件處理程序。如果事件是按鍵，請在執行前驗證按下的鍵是回車鍵。

var divButton = document.querySelector('#div-button');

divButton.addEventListener('click', activate);
divButton.addEventListener('keypress', activate);

function activate(e) {
  if (e.type === 'keypress' && e.keyCode == 13) {
    alert('activated the div'); 
  }
};

div {
    outline: 1px solid black;
}

div:focus {
    outline: 1px solid red;
}

<div id="div-button" tabindex="0">
    <h1>This is my div!</h1>
</div>