Блог

Главная - Вопросы по программированию - on(«размытие») не вызывается при нажатии за пределами элемента

on(«размытие») не вызывается при нажатии за пределами элемента

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть кнопка, которая делает 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>

Codepen:https://codepen.io/jasonws/pen/VwadjBY

Комментарии:

1.developer.mozilla.org/en-US/docs/Web/API/Element/blur_event «Событие размытия срабатывает, когда элемент потерял фокус. Основное различие между этим событием и focusout заключается в том, что focusout всплывает, в то время как размытие не [всплывает события].»

2. div по умолчанию не будет события размытия, вы можете добавить событие размытия в input или добавить tabindex атрибут в div, чтобы включить событие focus и blur для div.

3. @YuvarajG именно поэтому я сначала подумал, но похоже, что операция ожидает event bubbling выполнения ввода в родительский div

Ответ №1:

Вам нужно изменить событие размытия на событие focusout:

Событие focusout срабатывает, когда элемент вот-вот потеряет фокус. Основное различие между этим событием и размытием заключается в том, что focusout всплывает, а blur — нет.

Рабочий фрагмент:

 $("#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>