在元素外部单击时不会调用 on("blur")

Question

我有一个使 div 可见的按钮。当我点击 div 之外的任何地方时，会有一个监听器应该再次隐藏它，但它没有被触发。我做错了什么，或者有更好的方法来做到这一点？

$("#buttonNewIssue").on("click", function(e) {

  console.log("button new issue click");

  if ($("#newIssueMenu").hasClass("newIssueMenuHidden")) {

    $("#newIssueMenu").removeClass("newIssueMenuHidden");

    $("#newIssueMenu").addClass("newIssueMenuShown");

    $("#newIssueMenu").css("left", $(this).position().left);

    $("#newIssueMenu").css("top", $(this).outerHeight() + $(this).position().top);

    $("#newIssue").focus();

  } else {

    $("#newIssueMenu").removeClass("newIssueMenuShown");

    $("#newIssueMenu").addClass("newIssueMenuHidden");

  }

});

$("#newIssueMenu").on("blur", function(e) {

  console.log("newIssueMenu blur");

  $(this).removeClass("newIssueMenuShown");

  $(this).addClass("newIssueMenuHidden");

});

.newIssueMenuShown {

  z-index: 1;

  position: absolute;

  left: 0;

  top: 0;

  display: block;

  visibility: visible;

  transition-property: display, visibility;

  transition-duration: 0.4s;

}

.newIssueMenuHidden {

  display: none;

  visibility: hidden;

  transition: all 0.4s;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button id="buttonNewIssue" type='button' data-toggle='popover' data-content='Create New Issue'>New Issue</button>

<div id="newIssueMenu" class="newIssueMenuHidden">

  <form><input id="newIssue" type="text" placeholder="Issue Name"></form>

</div>

代码笔： https: //codepen.io/jasonws/pen/VwadjBY

Answer 1

您需要使用focusout 事件更改模糊事件：focusout 事件在元素即将失去焦点时触发。此事件与模糊之间的主要区别在于 focusout 会出现气泡，而模糊不会。工作片段：$("#buttonNewIssue").on("click", function(e) {&nbsp; &nbsp; console.log("button new issue click");&nbsp; &nbsp; if ($("#newIssueMenu").hasClass("newIssueMenuHidden")) {&nbsp; &nbsp; &nbsp; &nbsp; $("#newIssueMenu").removeClass("newIssueMenuHidden");&nbsp; &nbsp; &nbsp; &nbsp; $("#newIssueMenu").addClass("newIssueMenuShown");&nbsp; &nbsp; &nbsp; &nbsp; $("#newIssueMenu").css("left", $(this).position().left);&nbsp; &nbsp; &nbsp; &nbsp; $("#newIssueMenu").css("top", $(this).outerHeight() + $(this).position().top);&nbsp; &nbsp; &nbsp; &nbsp; $("#newIssue").focus();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $("#newIssueMenu").removeClass("newIssueMenuShown");&nbsp; &nbsp; &nbsp; &nbsp; $("#newIssueMenu").addClass("newIssueMenuHidden");&nbsp; &nbsp; }});$("#newIssueMenu").on("focusout", function(e) {&nbsp; &nbsp; console.log("newIssueMenu blur");&nbsp; &nbsp; $(this).removeClass("newIssueMenuShown");&nbsp; &nbsp; $(this).addClass("newIssueMenuHidden");});.newIssueMenuShown {&nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; display: block;&nbsp; &nbsp; visibility: visible;&nbsp; &nbsp; transition-property: display, visibility;&nbsp; &nbsp; transition-duration: 0.4s;}.newIssueMenuHidden {&nbsp; &nbsp; display: none;&nbsp; &nbsp; visibility: hidden;&nbsp; &nbsp; transition: all 0.4s;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="buttonNewIssue" type='button' data-toggle='popover' data-content='Create New Issue'>New Issue</button><div id="newIssueMenu" class="newIssueMenuHidden">&nbsp; &nbsp; <form><input id="newIssue" type="text" placeholder="Issue Name"></form></div>