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(); 
     } 
    } 
} 

私はこのようなものが欲しいです。しかし、コードは機能していません。 ご質問が不明な場合は、申し訳ありません。私はjavascriptで新しいので、私の過ちを許してください。

Answer 1

どうやってこのようになりますか？おそらく、問題を解決するためにこれを拡張することができます。

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>

Answer 2

あなたは画像の上かそうでないことを示すためにフラグを作成します。多くの方法があります。この例では、フラグを保持するためにHTML5 data-attributeを使用しています。

次に、キーを押すと、次の手順を実行するためにフラグがオンになっているかどうかを確認します。

// 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">