Question

我有一个可以集中精力的类名（＆＃39; myDiv＆＃39;）的div。我想编写一个检查2个条件的if语句：

是＆＃39; myDiv＆＃39;元素集中？
用户是否遇到了keydown事件（例如：输入密钥）？

如果满足这两个条件，我想触发控制台日志等操作。写这样一个声明的干净方法是什么？

<div tabindex="0" class="myDiv"> Fire a console log when I have focus and user hits enter key</div>

编辑：

以下是我尝试的内容：

if (('.myDiv').is(':focus')) {
            $(document).keydown(function(event) {       
                   if (event.keyCode ===13) {
                       console.log('do something')
                   }   
                })  
        };

Answer 1

我认为这是你正在寻找的东西：

//Set up event to listen for keydown
$(document).keydown(function(event) {
    // Capture only if enter key is pressed and .myDiv has focus
    if (event.keyCode ===13 && $('.myDiv').is(':focus')) {
        console.log('do something');
    }   
});

Answer 2

尝试使用focusin和focusout事件处理程序它应该工作！在你的focusin处理程序中，你必须像你已经那样倾听keydown。在焦点中，您可以删除此侦听器！告诉我它是否有帮助;）

如果在聚焦div时添加焦点侦听器会更好。然后，当聚焦div时，可以删除聚焦侦听器。多亏了你永远不会听到一个＆＃34;大＆＃34;例如总是在听keydown这样的事件...我会这样做我认为......这是一个关于如何在纯JS中做到这一点的可能示例：

＆＃13;

var myDiv = document.getElementById('myDiv');

myDiv.addEventListener('focus', onDiv_focus);

function onDiv_focus(domEvent){
  // add a listener for keydown on the document
  document.addEventListener('keydown', onFocused_keydown);
  
  // add a listener for blur on div
  myDiv.addEventListener('blur', onDiv_blur);
}

function onFocused_keydown(domEvent){
  // Do something
  console.log("focused + keydown");
}

function onDiv_blur(domEvent){
  // remove listeners
  myDiv.removeEventListener('blur', onDiv_blur);
  document.removeEventListener('keydown', onFocused_keydown);
}

＆＃13;

<input/>
<div id="myDiv"  tabindex="0">Focusable div<div>

＆＃13;

我如何编写一个if / else语句来检查一个类是否有焦点后跟一个事件监听器？

2 个答案: