如何在JavaScript中激活mouseover事件時觸發onkeypress事件

Question

我希望onkeypress事件僅在mouseover事件處於活動狀態時才起作用。

例如：如果我的鼠標指針沒有懸停在特定元素上，onkeypress應該不起作用。

document.getElementById("image").onmouseover=function(){
 document.onkeypress=function(event){
 event = event || window.event;
 var key = event.key || event.which || event.keyCode;
 if(key===84){ //this is for 'T'
    doThing(); 
       }
    }
}

我想要這樣的東西。 但是代碼不起作用。 抱歉，如果問題不清楚。 我是Java語言的新手，所以請原諒我的錯誤。

Answer 1

創建一個標記，以指示您何時在圖像上方或不上方。 有很多方法。 在此示例中，我使用HTML5數據屬性保存該標志。

然后，當您按該鍵時，請檢查該標志是否打開以進行下一步。

 // set a flag when you are over the image image.onmouseenter = function(){ console.log('set flag'); this.dataset.flag = 'true'; } // unset the flag when you leave the image image.onmouseleave = function(){ console.log('unset flag'); this.dataset.flag = 'false'; } document.onkeypress = function (event) { event = event || window.event; var key = event.key || event.which || event.keyCode; console.log('keypressed', key); if (key === 'T' && image.dataset.flag && image.dataset.flag === 'true') { console.log('do something'); } } 

 <img id="image" src="https://images.pexels.com/photos/31418/pexels-photo.png?h=350&auto=compress&cs=tinysrgb" alt="" width="200"> 

Answer 2

這樣的事情怎么樣？ 也許您可以擴展此范圍以幫助解決問題。

 var isHovered = false; function keyDown(event) { if (!isHovered) return; var key = event.keyCode; if(key === 84) { console.log('we are hovered and pressing T!') } } function hoveredBox() { isHovered = true; } document.addEventListener('keypress', keyDown); document.getElementById('elem').addEventListener('mouseenter', hoveredBox); document.getElementById('elem').addEventListener('mouseleave', function() { isHovered = false; }) 

 #elem { height:100px; width:100px; background-color:red } 

 <div id="elem"></div>