侦听悬停元素上的按键事件-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249214401

访问

+关注

分类

暂无分类

日期归档

暂无数据

侦听悬停元素上的按键事件

发布于2021-10-23 03:20 阅读(616) 评论(0) 点赞(7) 收藏(1)

我想在不丢失用户当前焦点的情况下检测控制键的命中。

例如（见下文）用户正在向 textarea 写入内容，textarea 是当前聚焦的元素。然后我的最终用户在 div 上移动他的鼠标（只是悬停，没有点击），如果他按下控制键，我想执行一个功能（keyDown下面的那些）。

为了使工作我有一个添加tabIndex到我的div，我不得不取消注释theDiv.focus()这让我伤心的，因为它会导致精力放在我的积极textarea的亏损线。

当鼠标位于特定元素上时，如何同时检测某人是否按下了键，而不会失去当前元素的焦点？

var theDiv = document.getElementById("theDiv");

function entered(e) {
  theDiv.addEventListener("keydown", keyDown);
  //theDiv.focus();
}

function keyDown(e) {
  alert(e.key)
}

theDiv.addEventListener("mouseover", entered);

#theDiv {
  width: 100px;
  height: 100px;
  border: 1px silver solid;
}

#theDiv:hover {
  border: 1px silver dashed;
}

<div id="theDiv" tabindex="-1">

</div>
<div>
  <textarea id="a">Click here, then hover the div above and hold "Shift" key</textarea>
</div>

解决方案

您可以mouseover向文档添加事件侦听器，以将鼠标悬停在全局变量中的元素存储起来。当keydown文档上有事件时，div如果将鼠标悬停在if 上，则阻止默认操作（因此不会将文本打印到 textarea 中）。

var theDiv = document.getElementById("theDiv");
var hoverTarget = document.body;
var res = document.getElementById("result");
document.addEventListener("mouseover", function(e){
  hoverTarget = e.target;
});
function keyDown(e) {
 res.innerText = "Key: "+e.key+" KeyCode: "+e.keyCode;
}
document.addEventListener("keydown", function(e){
  if(hoverTarget===theDiv){
    e.preventDefault();
    keyDown(e);
  }
});

#theDiv {
  width: 100px;
  height: 100px;
  border: 1px silver solid;
}

#theDiv:hover {
  border: 1px silver dashed;
}

<div id="theDiv" tabindex="-1">

</div>
<div>
  <textarea id="a">Click here, then hover the div above and hold "Shift" key</textarea>
</div>
<span id="result">

</span>

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 问答

作者：黑洞官方问答小能手