所以我正在做一個(gè)項(xiàng)目，需要一個(gè)& ltdiv & gt使用onclick事件。我已經(jīng)讓主要功能正常工作，但是還有一個(gè)問題。我需要onclick事件在用戶跳轉(zhuǎn)到& ltdiv & gt并按回車鍵。我在& ltdiv & gt這允許它獲得焦點(diǎn)，但是當(dāng)用戶按enter(或任何其他鍵)時(shí)，什么都不會(huì)發(fā)生。

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

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

提前感謝您的幫助。

我注意到問題的標(biāo)簽是WCAG和“可及性”。

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

你想要的是一個(gè)& ltbutton & gt。這給了你免費(fèi)的tabindex和鍵盤控制。

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

如果絕對(duì)有必要的話，這里有一個(gè)關(guān)于使用ARIA實(shí)現(xiàn)偽按鈕的很好的介紹: https://developer . Mozilla . org/en-US/docs/Web/Accessibility/ARIA/ARIA _ Techniques/Using _ the _ button _ role

其要點(diǎn)是，您需要添加role="button "屬性，并手動(dòng)管理aria-pressed屬性的狀態(tài)(通過在javascript中捕獲關(guān)鍵事件和點(diǎn)擊；其他答案已經(jīng)非常全面地涵蓋了這一點(diǎn)，所以我不會(huì)重復(fù)細(xì)節(jié))

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

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

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

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

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

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

嘗試在上述div上綁定keypress事件，并檢測(cè)是否按下了Enter鍵(代碼編號(hào)為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”屬性在鏈接上有特定的行為，因?yàn)樗梢杂胑nter鍵觸發(fā)。

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

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

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

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

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

下面是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;
     }
})

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

對(duì)兩個(gè)事件使用相同的事件處理程序。如果事件是按鍵，請(qǐng)?jiān)趫?zhí)行前驗(yàn)證按下的鍵是回車鍵。

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>