javascript - 如何使 onblur 事件不在特殊 div 中工作

Question

我有一个 <input>文本框和一个 <div>包含城市名称。

单击 div 的内容时，我会用相应的城市名称填充文本框，这有效。

我还需要在 <input> 时触发警报文本框失去焦点。为此，我使用了 onblur事件。

问题是这个 onblur当用户点击其中一个城市名称时，事件也会触发 <div> ，虽然它不应该。

只有当模糊事件不是由单击其中之一引起时，我该怎么做才能触发警报 <div> ？

function clicking(s) {
  $(s).closest(".search_div").find(".country").val($(s).find(".txtcountry").text())
  $(s).closest(".search_div").find(".co-id").val($(s).find(".countryid").val())
  $(s).closest(".search_div").find(".co").empty();
}

$('.country').each(function() {
  $(this).on('blur', function() {
    alert("hello")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search_div">
  <input class="country" value="" type="text" />
  <input type="hidden" class="co-id" value="" />
  <div class="co" style="border:1px solid red;">
    <div class="selectCountry" onClick="clicking(this)">
      <input type="hidden" value="1198418" class="countryid" />
      <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Ankara</span> </div>

    <div class="selectCountry" onClick="clicking(this)">
      <input type="hidden" value="1198425" class="countryid" />
      <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Istanbul</span> </div>
  </div>
</div>

Answer 1

即使没有这个技巧它也能正常工作，所以我认为这取决于浏览器。这是一个解决方案:

var menuHover = 0;

function clicking(s) {
  $(s).closest(".search_div").find(".country").val($(s).find(".txtcountry").text());
  $(s).closest(".search_div").find(".co-id").val($(s).find(".countryid").val());
  $(s).closest(".search_div").find(".co").empty();
  menuHover = 0;
}


$('.selectCountry').on({
  mousedown: function() {
    menuHover = 1;  
  },
  click: function() {
    menuHover = 1;  
  },
  mouseleave: function() {
    menuHover = 0;
  }
});

$('.country').each(function() {
  $(this).on('blur', function() {
    if (menuHover == 0) {
      alert("hello");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search_div">
  <input class="country" value="" type="text" />
  <input type="hidden" class="co-id" value="" />
  <div class="co" style="border:1px solid red;">
    <div class="selectCountry" onClick="clicking(this)">
      <input type="hidden" value="1198418" class="countryid" />
      <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Ankara</span> </div>

    <div class="selectCountry" onClick="clicking(this)">
      <input type="hidden" value="1198425" class="countryid" />
      <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Istanbul</span> </div>
  </div>
</div>