Question

我希望 onkeypress 事件仅在鼠标悬停事件处于活动状态时才有效。

例如：如果我的鼠标指针没有悬停在特定元素上，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

创建一个标志，指示您何时在图像上方。有很多方法。在这个例子中，我使用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">

Answer 2

这样的事情怎么样？也许您可以扩展它以帮助解决问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在javascript中处于活动状态时触发onkeypress事件

2 个答案: