时间戳

首页 > 解决方案 > 在元素外部单击时未调用 on("blur")

javascript - 在元素外部单击时未调用 on("blur")

问题描述

我有一个使 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

标签： javascripthtmljquerycss

解决方案

您需要使用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>

推荐阅读