在元素外部单击时不会调用 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) {

    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("focusout", 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.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">

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

</div>