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

问题描述 投票:1回答:2

我有一个<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>
javascript jquery
2个回答
4
投票

它甚至没有这个技巧,所以我认为这取决于浏览器。这是一个解决方案:

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>

0
投票

尝试下一个脚本:

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 click设置处理程序没有帮助,因为模糊首先触发。所以你应该使用setTimeout()。你还应该添加$('。country')。click()处理程序每​​次刷新数据。

© www.soinside.com 2019 - 2024. All rights reserved.