當焦點位於按鈕上時，如何防止“keypress”事件觸發“click”事件 - javascript/html dom

Question

我有一個按鈕可以觸發“stopstart”功能（動畫）。 我也想有一個無鼠標的方法來做到這一點，所以我將相同的功能綁定到空格鍵。 這行得通。

但是，如果焦點在按鈕上，並且我按空格鍵 - 兩個事件都會觸發，則無法解決如何阻止它（keypress 事件首先觸發 - 在 chrome 中..）

事件監聽器代碼：

document.getElementById("stopstart").addEventListener("click",
        function (event) {
            stopstart();
        }); //add event listener to "stopstart" button  

document.addEventListener("keypress",
        function (event) {
            if (event.keyCode === 32) { //space key
                stopstart();
            }
        }); //add spacekey event listener to document

我不想從按鈕上移除焦點，因為我想保留該功能 - 這兩個事件似乎是單獨生成的 - 所以我還沒有找到如何檢測點擊事件實際上是由空格鍵。

這是否可以解決使用而無需添加臨時標志來捕獲它等

Answer 1

關鍵事件的點擊位置為零，零，因此您可以查找。

document.getElementById("stopstart").addEventListener("click",
    function (event) {
        var x = event.x || event.clientX;
        var y = event.y || event.clientY;
        if (!x && !y) {
            alert("key press");
            return false;
        }
        stopstart();
    }); 

http://jsfiddle.net/mScEC/

Answer 2

     function (event) {
        if (event.pointerType !== "mouse") return;
         stopstart();
     }); //add event listener to "stopstart" button  

document.addEventListener("keypress",
     function (event) {
         if (event.keyCode === 32) { //space key
             stopstart();
         }
     }); //add spacekey event listener to document```

Answer 3

您可以簡單地在 keypress 事件偵聽器中使用 event.preventDefault() 來防止在按鍵時觸發 Button Click 事件

例如

document.addEventListener('keydown', function (e) {
    e.preventDefault();
    if (e.key === 'Enter') {
        try {
            // if expression is not evaluated then catch block will be executed
            screen.value = eval(screen.value);
        }
        catch (error) {
            console.log(error.message);
            screen.value = 'Invalid Operation';
        }
       
    }
})