onblur 事件未触发

Question

当我点击“ side panel ”外部时，我需要触发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="0"

<div tabindex="0" ....

感谢 Emil，你可以使用 react

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