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>

Answer 2

尝试下一个脚本：

function OnBlur() { 
  if (!$('.co').data('clicked')) {
    alert("hello");
  }
}
$(document).ready(function() {
  $('.co').click(function() {
    $('.co').data('clicked', true);
  });

  $('.country').click(function() {
    $('.co').data('clicked', false);
  });

  $('.country').on('blur',function() {
    setTimeout(OnBlur, 500);
  });
});

只需为 .co 设置处理程序，点击“没有帮助”，因为 blur 会先触发。所以你应该使用 setTimeout（）。另外，您应该添加 $（＆＃39; .country＆＃39;）。click（）处理程序每次都刷新数据。

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

2 个答案: