在li标签中使用blur（）

Question

我正在尝试将blur()与li标签一起使用。在li下拉开关中有li下拉菜单的位置。请在单击外部时关闭下拉列表时检测到blur事件。

let input = document.querySelector('div');

input.onblur = inputBlur;
input.onfocus = inputFocus;

function inputBlur() {
  input.value = 'Focus has been lost';
  console.log("Focus has been lost");
}

function inputFocus() {
  input.value = 'Focus is here';
  console.log("Focus has here");
}

$(document).ready(function() {
  $('.form-control').bind('blur', function() {
    $(this).parent().next('li').find('.form_helper').hide();
    console.log("blur working 1");
  }).bind('focus', function() {
    $(this).parent().next('li').find('.form_helper').show();
    console.log("blur working 1");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" role="group" aria-label="Third group">
  <div>
    <li class="elm-bar" id="sectionClipping" type="" class="btn sectionClip dropdownIssue" data-toggle="dropdown" title="sectionclip" (click)='createsectionclip("sectionclip")'>
      <img class="svg pointer" id="clipImg" src='https://image.flaticon.com/icons/svg/883/883787.svg' title="Section Clipping">
    </li>
    <ul class="dropdown-menu" style="margin-left: -134px;transform: translate3d(0px, -2px, 0px); ">
      <ul class="inline list-li" style="width:400px; justify-content: space-evenly;">
        <li title="xplane" class="nav-link" (click)="createsectionclip('xplane')">
          <a href="javascript:void(0)"><img src="https://image.flaticon.com/icons/svg/883/883787.svg" title="xplane" class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px"> </a>
        </li>
        <hr class='seperator-inline-dashed' />
        <li title="yplane" class="nav-link" (click)="createsectionclip('yplane')">
          <a href="javascript:void(0)"> <img src="https://image.flaticon.com/icons/svg/883/883787.svg" title="yplane" class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px"> </a>
        </li>
        <hr class='seperator-inline-dashed' />
        <li title="zplane" class="nav-link" (click)="createsectionclip('zplane')">
          <a href="javascript:void(0)"><img src="https://image.flaticon.com/icons/svg/883/883787.svg" title="zplane" class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px"></a>
        </li>
      </ul>
    </ul>
  </div>
</div>

https://jsfiddle.net/6grd1phs/