Javascript blur与click冲突解决办法

解决blur与click冲突

前言：

在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。

一、blur和click事件简述

1. blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。
2. click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。
   

示例1：blur事件为表单事件

<input type="text" id="tel">
<script>
  document.addEventListener("blur", function(){
    console.log("my document blur");
  });

  var ipt = document.getElementById("tel");
  ipt.addEventListener("blur", function(){
    console.log("my input blur");
  });
</script>
// 输出结果：document为非表单元素
my input blur

示例2：click事件可冒泡

<input type="text" id="tel">
<script>
  document.addEventListener("click", function(){
    console.log("my document click");
  });

  var ipt = document.getElementById("tel");
  ipt.addEventListener("click", function(){
    console.log("my input click");
  });
</script>
// 输出结果：
my input click
my document click

示例3：点击某元素导致前一个元素失去焦点，blur事件优先于click事件

<input type="text" id="ipt">
<input type="button" id="btn" value="点我">
<script>
  var ipt = document.getElementById("ipt");
  ipt.addEventListener("blur", function(){
    console.log("my input blur");
  });

  var btn = document.getElementById("btn");
  btn.addEventListener("click", function(){
    console.log("my button click");
  });
</script>
// 输出结果：
my input blur
my button click

二、下拉框blur和click事件冲突，导致不能正常选择值

实际开发中，我们会经常遇到某一下拉列表框，点击其他元素消失列表框；点击下拉框子元素使其生效的需求。这就会面临冲突问题。

<!-- DOM结构示意 -->
<input type="text" placeholder="请选择姓氏" readonly>
<div class="search-list" data-status="hide">
  <ul>
    <li><a href="javascript:">赵</a></li>
    <li><a href="javascript:">钱</a></li>
    <li><a href="javascript:">孙</a></li>
    <li><a href="javascript:">李</a></li>
  </ul>
</div>

/** 说明：
 * 目前通过ul外层div自定义属性“data-status”控制其是否显示  
 */
(function($){
  $("input").focus(function(){
    // input框获取焦点，展示下拉框
    $(".search-list").attr("data-status", "show");
  }).blur(function(){
    // input框失去焦点，隐藏下拉框
    $(".search-list").attr("data-status", "hide");
  });
  // 选择对应选项，并赋值给input框
  $(".search-list li a").click(function(){
    console.log("执行");
    $("input").val($(this).text());
  });
})(jQuery);

执行上述代码，会出现一个问题，并不能正确获取下拉框中某值。

原因：由于JavaScript为单线程，同一时间只能执行处理一个事件。由上述示例3，可得知“blur优先于click执行”。而在本示例中，由于blur处理程序，会将对应的下拉框展示区隐藏，所以导致其后续click事件并不会执行。上述console的信息也不会被输出。

解决方案1：对blur事件进行延迟，让click先执行。

(function($){
  $("input").focus(function(){
    // input框获取焦点，展示下拉框
    $(".search-list").attr("data-status", "show");
  }).blur(function(){
    setTimeout(function(){
      // input框失去焦点，隐藏下拉框
      $(".search-list").attr("data-status", "hide");
    }, 300);
  });
  // 选择对应选项，并赋值给input框
  $(".search-list li a").click(function(){
    console.log("执行");
    $("input").val($(this).text());
  });
})(jQuery);

三、使用mousedown让其优先执行

示例4：将示例3中的click事件改为mousedown

<input type="text" id="ipt">
<input type="button" id="btn" value="点我">
<script>
  var ipt = document.getElementById("ipt");
  ipt.addEventListener("blur", function(){
    console.log("my input blur");
  });

  var btn = document.getElementById("btn");
  btn.addEventListener("mousedown", function(){
    console.log("my button mousedown");
  });
</script>
// 输出结果：
my button mousedown
my input blur

mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。

mouseup事件：当在元素上放松鼠标按钮时，会发生mouseup事件。

注意：

（1）mousedown与click 事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。
（2）mouseup与click事件不同，mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

补充：mousedown、mouseup、click

<input type="button" id="btn" value="点我">
var btn = document.getElementById("btn");
btn.addEventListener("mousedown", function(){
  console.log("my button mousedown");
});
btn.addEventListener("click", function(){
  console.log("my button click");
});
btn.addEventListener("mouseup", function(){
  console.log("my button mouseup");
});
输出结果：
my button mousedown
my button mouseup
my button click

所以，其执行顺序为：

mousedown >> mouseup >> click

解决方案2：将click事件改为mousedown，让其优先于blur事件执行

(function($){
  $("input").focus(function(){
    // input框获取焦点，展示下拉框
    $(".search-list").attr("data-status", "show");
  }).blur(function(){
    // input框失去焦点，隐藏下拉框
    $(".search-list").attr("data-status", "hide");
  });
  // 选择对应选项，并赋值给input框
  $(".search-list li a").mousedown(function(){
    $("input").val($(this).text());
  });
})(jQuery);

 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 解决blur与click冲突  # Javascript  # blur与click冲突  # jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题  # 快速解决js开发下拉框中blur与click冲突  # Javascript中click与blur事件的顺序详析  # 下拉框  # 表单  # 鼠标  # 按下  # 让其  # 当鼠标  # 就会  # 都有  # 两种  # 而在  # 而不  # 希望能  # 自定义  # 使其  # 请选择  # 一个问题  # 并不能  # 谢谢大家  # 会将  # 不能正常 

相关文章： 如何用低价快速搭建高质量网站？  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  如何快速登录WAP自助建站平台？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  智能起名网站制作软件有哪些,制作logo的软件？  如何在阿里云购买域名并搭建网站？  如何选择域名并搭建高效网站？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  建站之星上传入口如何快速找到？  一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  如何在宝塔面板中创建新站点？  javascript中的try catch异常捕获机制用法分析  建站之星24小时客服电话如何获取？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  高防服务器：AI智能防御DDoS攻击与数据安全保障  魔方云NAT建站如何实现端口转发？  南宁网站建设制作定制,南宁网站建设可以定制吗？  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  h5在线制作网站电脑版下载,h5网页制作软件？  济南企业网站制作公司,济南社保单位网上缴费步骤？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  长沙做网站要多少钱,长沙国安网络怎么样？  如何在景安云服务器上绑定域名并配置虚拟主机？  广州商城建站系统开发成本与周期如何控制？  广德云建站网站建设方案与建站流程优化指南  网站图片在线制作软件,怎么在图片上做链接？  如何在服务器上配置二级域名建站？  建站之星如何开启自定义404页面避免用户流失？  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置？  装修招标网站设计制作流程,装修招标流程？  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  已有域名和空间，如何快速搭建网站？  建站org新手必看：2024最新搭建流程与模板选择技巧  建站之星代理如何优化在线客服效率？  如何选择可靠的免备案建站服务器？  建站之星IIS配置教程：代码生成技巧与站点搭建指南  魔毅自助建站系统：模板定制与SEO优化一键生成指南  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  油猴 教程,油猴搜脚本为什么会网页无法显示？  建站之星导航菜单设置与功能模块配置全攻略  公司网站制作价格怎么算,公司办个官网需要多少钱？  ppt制作免费网站有哪些,ppt模板免费下载网站？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  盐城做公司网站,江苏电子版退休证办理流程？  如何在万网开始建站？分步指南解析  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  北京制作网站的公司,北京铁路集团官方网站？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？