Question

我正在尝试从我的代码中删除所有jQuery。到目前为止，我使用

if($(selector).find(':focus').length === 0){
  //focus is outside of my element
}else{
  //focus is inside my element
}

确定焦点是否在我的元素之一之内。您能告诉我一种无jQuery的方法吗？

Answer 1

可以通过Element的matchs（）方法和简单的选择器字符串如下：

let hasFocused = elem.matches(':focus-within:not(:focus)');
let focusedOrHasFocused = elem.matches(':focus-within');

Answer 2

在querySelectorAll()中使用CSS :focus伪类

setTimeout(function(){
  if (document.querySelectorAll("div :focus").length === 0)
    console.log("not focused");
  else
    console.log("focused")
}, 2000);

<div id="div">
  <input type="text">
</div>

Answer 3

如果遇到在模糊事件发生后document.activeElement返回<body>元素的问题，则只需用setTimeout（）包装它，它将返回正确的元素。< / p>

handleBlur() {
    setTimeout(() => { 
        console.log(document.activeElement); // this actually return active/focused element
    });
}

如果您独立使用它而没有超时

handleBlur() {
    console.log(document.activeElement); // this is returning <body> element
}

Answer 4

根据您的情况，使用事件可能会更高效。

在这种情况下，您可以使用 focusin 和 focusout 事件。

const el = document.getElemen
el.addEventListener("focusin", () => alert("focus!"));
el.addEventListener("focusout", () => alert("blur!"));

Answer 5

要检索选定的元素，可以使用：

let activeElement = document.activeElement

要检查特定元素，请执行以下操作：

let elem = document.getElementById('someId');

let isFocused = (document.activeElement === elem);

Answer 6

您可以为此使用Node.contains本机DOM方法。

el.contains(document.activeElement);

将检查activeElement是否是el的后代。如果要检查多个元素，则可以使用some函数进行迭代。

Answer 7

这是@Northern 和@Adam Šipický 回答之后的一个工作示例...

const tr = document.querySelector("table tbody tr");

tr.addEventListener('blur', () => {
  setTimeout(() => {
    if (!tr.contains(document.activeElement)) {
      // Execute your condition code here...
    }
  }, 200);
}, true);

Answer 8

结合了这里发布的一些答案。使用 focusin、focusout、contains 和 relatedTarget 的组合，您应该能够知道焦点何时在特定元素的子元素上。

const elm = document.getElementById('check-focus-here')
elm.addEventListener('focusin', (event) => {
  console.log(event.target, event.relatedTarget)
  // console.log(elm.contains(event.relatedTarget))
})

elm.addEventListener('focusout', (event) => {
  console.log(event.target, event.relatedTarget)
  console.log(elm.contains(event.relatedTarget))
})

#check-focus-here {
  border: 2px solid;
  padding: 8px;
  margin: 8px;
}

<div id="check-focus-here">
  <input id="first-name" type="text" />
  <input id="middle-name" type="text" />
  <input id="last-name" type="text" />
  <button type="button">Save Name</button>
</div>

<button type="button">Tab to this for outside focus</button>

如何使用javascript检查元素是否关注了孩子？

8 个答案: