onblur事件没有解雇

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>

Answer 1

要在元素上使用Onblur，它应首先获得焦点，Div元素默认不会获得焦点。你可以添加tabindex =＆＃34; 0＆＃34;

<div tabindex="0" ....

感谢Emil，您可以使用

做出反应

tabIndex={0}

Answer 2

您必须在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>

Answer 3

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

<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';
  }
}