如果我在JavaScript中爲按鈕設置了mousedown事件，當我按下按鈕時它會觸發。如果我設置了一個點擊事件，它會在我釋放按鈕時觸發。所以我可以隨時通知按鈕的狀態。但是，如果使用鍵盤「按下」按鈕（例如，通過使用選項卡選擇按鈕，然後按空格鍵按下按鈕），我不會收到任何事件。但是，當我釋放空格鍵時，我得到了單擊事件。當按鈕按下按鈕時，在HTML按鈕上捕獲mousedown事件

看來我可以將一個按鍵事件附加到按鈕上，然後通過查看按下的按鍵並確保它是空格鍵，我可以模擬mousedown，也就是說，我可以告訴按鈕被按下。但是，這假定空格鍵是被按下的關鍵;在另一個瀏覽器或操作系統上，情況可能並非如此。我想我可以簡單地檢查一下按鈕是打開還是關閉，但是我必須保持一些與鼠標事件共享的狀態，否則鼠標可能已經按下了按鈕，並且在鼠標關閉時觸摸了不相關的按鍵。

我還沒有找到任何具體說明如何處理這種情況。我已經嘗試過改變事件，但它從未發生過火災。理想情況下，我希望只要按鈕的狀態發生變化就會觸發單個事件，而不管它如何變化。或者，有兩個單獨的事件，一個是狀態改變爲按下狀態，另一個是狀態改變爲未按下狀態時，也可以接受，因爲我可以將它們結合起來模擬前者。

來源

2014-02-25 Michael

@MrJack我感興趣的是如何做到這一點沒有jQuery的 – Michael

jQuery是開源的，你可以只下載的開發。版本和去那個特定的功能，這就是我的意思，但重新閱讀時，我聽起來像別的東西。 –

瞭解。在一般情況下，我更喜歡避免jQuery的答案，因爲它首先假設，jquery正是我正在做的事情（我可能不得不做額外的工作來確認它），然後如果它確實需要挖掘瞭解它是如何做到的。 – Michael

-1

UPDATE

查看此JSFiddle進行演示。

例子：

$('input').on('keydown mousedown', function(e){ 
    var code = e.keyCode ? e.keyCode : e.charCode; 
    alert('rawr!'); 
    if(code == 13) 
    { 
     alert('Enter key pressed!'); 
    } 
});

來源

2014-02-25 21:11:41

但是當使用鍵盤按下按鈕時，鼠標事件不會觸發 – Michael

因此，您將'.onmousedown'和'.onkeypress'綁定到相同的函數 –

不，因爲正如我最初提到的那樣，不能保證關鍵事件實際上是導致按鈕被按下。（另外，我認爲它會是onkeydown，而不是onkeypress） – Michael

例不使用jQuery：

<html><body> 
<button id="mybutton">Click or press</button> 
<div id="status"></div> 
<script type='text/javascript'> 
function buttonDown(button) { 
    document.getElementById("status").innerHTML = "button " + button.id + " pressed"; 
} 
function buttonUp(button) { 
    document.getElementById("status").innerHTML = "button " + button.id + " released"; 
} 
var b = document.getElementById("mybutton"); 
b.addEventListener("keydown", function (e) { 
    e = e || window.event; 
    var code = e.keyCode || e.charCode; 
    if (code == 32 || code == 13) { // enter or space 
    buttonDown(this); 
    } 
}); 
b.addEventListener("keyup", function (e) { 
    e = e || window.event; 
    var code = e.keyCode || e.charCode; 
    if (code == 32 || code == 13) { // enter or space 
    buttonUp(this); 
    } 
}); 
b.addEventListener("mousedown", function (e) { 
    e = e || window.event; 
    var button = e.which || e.button; 
    if (e.button == 0) { // left click 
    buttonDown(this); 
    } 
}); 
b.addEventListener("mouseup", function (e) { 
    e = e || window.event; 
    var button = e.which || e.button; 
    if (e.button == 0) { // left click 
    buttonUp(this); 
    } 
}); 
</script> 
</body></html>

來源

2014-02-25 21:48:07 James

看起來不錯，但是有什麼樣的保證，甚至是指引輸入或空格是唯一的字符代碼對應的按鈕被按下，或者他們不會產生按鈕按下的任何情況下？ – Michael

我相當肯定，這將適用於所有按鈕具有焦點時按下/釋放輸入/空格的情況，無論瀏覽器或操作系統如何。我不相信任何其他按鍵通常會觸發按鈕，但如果出現這種情況，您可以確定鍵碼並調整事件監聽器。 – James

當按鈕按下按鈕時，在HTML按鈕上捕獲mousedown事件

回答

UPDATE

相關問題