如何在javascript中鼠标悬停事件处于活动状态时触发onkeypress事件答案

【问题标题】：How to trigger a onkeypress event while mouseover event is active in javascript如何在javascript中鼠标悬停事件处于活动状态时触发onkeypress事件
【发布时间】：2017-10-04 03:51:14
【问题描述】：

我希望 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 新手，所以请原谅我的错误。

【问题讨论】：

您描述的交互对我来说没有多大意义。由于按键事件被发送到具有“焦点”的元素，因此被悬停的元素和接收按键事件的元素实际上并没有太大的关系。
顺便说一句 document 没有称为 getElementsById 的方法（因为 ID 是唯一的）。
我正在尝试实现类似 Hover Zoom（chrome 扩展）的功能。在哪里，当您将鼠标悬停在图像上并按“s”时，您可以保存该图像。
它的 document.getElementById。对不起这个错误
这个 example 使用 CSS 应该可以让你开始使用缩放。那么您只需要保存onkeypress 事件

标签： javascript

【解决方案1】：

创建一个标志以指示您何时在图像上方。有很多方法。在此示例中，我使用HTML5 data-attribute 来保存标志。

然后当你按键的时候，检查flag是否亮着进行下一步。

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

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

【讨论】：

【解决方案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
}

&lt;div id="elem"&gt;&lt;/div&gt;

【讨论】：