Question

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

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

我预计这不起作用，但我想不出另一种方法。

JSFIDDLE：http://jsfiddle.net/c57nkb9y/

Answer 1

第一种解决方案

创建一个变量存储鼠标状态，然后在鼠标进入并离开时更新它：

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!')
  }
})

第二种解决方案

鼠标进入并离开

附加和分离 KeyPress侦听器：

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

Answer 2

正如您可以阅读here一样，将键盘事件侦听器附加到不可聚焦的元素（如#main_content div）是没用的。相反，我建议您将它们附加到window对象或body元素。

kube的答案应该可以正常运行，但是当你离开主要div时，你真的不需要一直听到keydown事件。我提议这个：

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

See this fiddle

Answer 3

您可以在keypress之后添加mouseenter个活动，并在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 () {});
    });
});

UPDATED JSFIDDLE

仅当鼠标在对象上时才触发键事件

3 个答案:

第一种解决方案

第二种解决方案