Javascript 仅当鼠标位于对象上方时触发关键点事件

我想在鼠标悬停在文档的某个部分并按下该键时触发一个键事件。我尝试了以下方法：

$(document).ready(function(){
    $("#main_content").keydown(function(e) {
        if(e.which == 40) {
            alert("button Down");
            return false;
        }
    });
});

我原以为那不管用，但我想不出别的办法

---

jsIDLE:

您可以在

mouseenter

之后添加

keypress

事件，然后在

mouseleave

上删除它：

$(document).ready(function () {
    $('#main_content').mouseenter(function () {
        console.log(this)
        $(document).keypress(function (e) {
            var code = e.keyCode || e.which;
            if (code == 40) {
                alert("button Down");
                return false;
            }
        });
    }).mouseleave(function () {
        $(document).on("keypress", function () {});
    });
});

第一种解决方案 创建变量存储鼠标状态，然后在鼠标进入和离开时更新它：

let mouseIsOver = false
const content = document.getElementById('main_content')

content.addEventListener('mouseenter', () => {
  mouseIsOver = true
})

content.addEventListener('mouseleave', () => {
  mouseIsOver = false
})

document.body.addEventListener('keydown', event => {
  // When key pressed, check mouseIsOver
  if (mouseIsOver && event.which === 40) {
    alert('Button Down!')
  }
})

const content = document.getElementById('main_content')

function keyPressHandler() {
  if (event.which === 40) {
    alert('Button Down!')
  }
}

content.addEventListener('mouseenter', () => {
  document.body.addEventListener('keypress', keyPressHandler)
})

content.addEventListener('mouseleave', () => {
  document.body.removeEventListener('keypress', keyPressHandler)
})

---

第二种解决方案 当鼠标进入和离开时，附加和分离按键侦听器：

let mouseIsOver = false
const content = document.getElementById('main_content')

content.addEventListener('mouseenter', () => {
  mouseIsOver = true
})

content.addEventListener('mouseleave', () => {
  mouseIsOver = false
})

document.body.addEventListener('keydown', event => {
  // When key pressed, check mouseIsOver
  if (mouseIsOver && event.which === 40) {
    alert('Button Down!')
  }
})

const content = document.getElementById('main_content')

function keyPressHandler() {
  if (event.which === 40) {
    alert('Button Down!')
  }
}

content.addEventListener('mouseenter', () => {
  document.body.addEventListener('keypress', keyPressHandler)
})

content.addEventListener('mouseleave', () => {
  document.body.removeEventListener('keypress', keyPressHandler)
})

如您所知，将键盘事件侦听器附加到不可聚焦的元素（如

#main_content

div）是无用的。相反，我建议您将它们附加到

窗口

对象或

主体

元素

kube的回答应该很好，但当你离开主分区时，你真的不需要一直听按键事件。我建议：

$(document).ready(function () {
    $("#main_content").mouseover(armKeyEvent);
    $("#main_content").mouseout(shutdownKeyEvent);

    function armKeyEvent() {
        $(window).keydown(function(e) {
            if(e.which == 40) {
                alert("button Down");
                return false;
            }
        });
    }

    function shutdownKeyEvent() {
        $(window).unbind('keydown');
    }
});

---

.

可能重复“是”这是我的想法，但它对$（文档）有效。必须有一种方法可以做到这一点。那么，当您将鼠标悬停在元素上时，是否要触发一个键事件？或者，当你在上面按下按键时，你想触发它吗？我想触发它，当我在上面按下按键时。然后看一看复制的帖子。这会告诉你怎么做。通常无

input

字段不能接收关键事件，因此您必须为其添加

tabindex=“x”

属性。我不想在悬停时触发警报。当我悬停并按下向下键时，应该会触发。注意“body”选择器周围缺少引号。是的，我想传递一个对象，但忘记指定document.body。我犹豫是否发布相同的方法。但是，如果您想这样做，则必须命名处理程序函数，以防止在调用shutdownKeyEvent时从

窗口

解除所有处理程序的绑定。