失去焦点事件未触发

Question

我需要在用户点击“侧边栏”之外的地方时触发onblur事件，以便在用户单击导航面板之外的区域时关闭面板。
虽然我正在使用React JS，但为了简单起见，我已经用纯JavaScript编写了示例。 最近我写了类似的东西，一切正常，但在这种情况下它不起作用，可能是由于固定位置。

var d = document.getElementById("fname");

d.addEventListener("blur", myFunction);

function myFunction() {
  alert("Input field lost focus.");
}
var state = true;

function myFunction2() {
  state = !state;
  if (state) {
    d.className = "header__aside";
  } else {
    d.className += " header__aside--open";
  }

}

.main {
  background-color: violet;
  padding: 50px;
}

.header__aside {
  background-color: #cfcfcf;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  font-size: 1.2rem;
  height: 100%;
  opacity: 0.9;
  position: fixed;
  right: -30%;
  top: 0;
  transition: right 0.5s ease-out;
  width: 30%;
  z-index: 10;
}

.header__aside--open {
  right: 0;
}

<p class='main'>This example</p>
<button type="button" onClick="myFunction2()">
&#9776;
</button>
<div class="header__aside" id="fname">
  <div class="aside-nav">
    <div class="aside-nav__header">
      <button type="button" class="aside-nav__header-button" onClick="myFunction2()">x</button>
    </div>
    <nav class="nav nav__aside">
      <a class="nav__aside-link active" aria-current="true" href="/">Main</a>
    </nav>
  </div>
</div>

- Taras Yaremkiv

---

据我所知，您无法在 div 上附加 onblur 事件，一般情况下它与输入框和表单元素一起使用。 - cнŝdk

@chsdk 在React中很奇怪，但它的工作效果是100％的，类似于这样：<div className="header__bottom" onBlur={this.handleClickOutside}> - Taras Yaremkiv

@chsdk 好的，我会使用React JS重新编写问题。 - Taras Yaremkiv

但我认为你需要的是一个“click”事件，并检查目标是否不是你的div。 - cнŝdk

@chsdk，我从detect-click-outside-react-component问题中获取了一个示例。这并不简单，因为我需要检测用户是否点击了动态侧边栏区域的外部。 - Taras Yaremkiv

是的，这可能有点困难，关于React，我无法帮助你。很抱歉我不熟悉ReactJS。 - cнŝdk

Answer 1

要在一个元素上使用Onblur，它首先应该获得焦点，Div元素默认情况下不会获得焦点。您可以添加tabindex="0"。

<div tabindex="0" ....

感谢Emil，对于React，您可以使用

tabIndex={0}

- shakeel

---

这个技巧即使在React中也适用。您可以在最外层的div中添加tabIndex={0}以便从输入中取消键盘。 - emil

如果具有onBlur效果和tabindex的元素是在另一个元素的onClick中创建的，则当它出现时，它不会自动获得焦点。因此，在创建元素后，您可能需要使用element.focus()来将其聚焦。 - Christopher K.

Answer 2

将tabindex=0添加到panel-html中，并在打开面板的JS中添加focus()：

<div id=panel tabindex=0></div>

document.getElementById('panel').onclick = function(){ 
  document.getElementById('panel').style.display = 'block';
  document.getElementById('panel').focus();
  document.getElementById('panel').onblur = function(){ 
    document.getElementById('panel').style.display = 'none';
  }
}

- Sebastian H

Answer 3

你需要在 div 上设置 tabindex 并手动聚焦它，以便触发模糊处理程序

var d = document.getElementById("fname");

d.addEventListener("blur", myFunction);

function myFunction() {
  alert("Input field lost focus.");
}
var state = true;

function myFunction2() {
  state = !state;
  d.focus();
  if (state) {
    d.className = "header__aside";
  } else {
    d.className += " header__aside--open";
  }

}

.main {
  background-color: violet;
  padding: 50px;
}

.header__aside {
  background-color: #cfcfcf;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  font-size: 1.2rem;
  height: 100%;
  opacity: 0.9;
  position: fixed;
  right: -30%;
  top: 0;
  transition: right 0.5s ease-out;
  width: 30%;
  z-index: 10;
}

.header__aside--open {
  right: 0;
}

<p class='main'>This example</p>
<button type="button" onClick="myFunction2()">
&#9776;
</button>
<div class="header__aside" id="fname" tabindex="0">
  <div class="aside-nav">
    <div class="aside-nav__header">
      <button type="button" class="aside-nav__header-button" onClick="myFunction2()">x</button>
    </div>
    <nav class="nav nav__aside">
      <a class="nav__aside-link active" aria-current="true" href="/">Main</a>
    </nav>
  </div>
</div>

- Joschi