Javascript blur与click冲突解决办法

更新时间：2017年01月09日 11:18:43 投稿：lqh

这篇文章主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下

解决blur与click冲突

前言：

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

一、blur和click事件简述

blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。
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);

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

您可能感兴趣的文章:

小程序多文件上传 Tdesign的过程
众所周知,小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口,现在给大家分享小程序多文件上传 Tdesign的方法,感兴趣的朋友一起看看吧
2023-11-11
使用console进行性能测试
各大浏览器内置的开发工具，都提供了一个console对象。它主要有两个作用：显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。下面我们就来详细研究下如何使用console进行性能测试。
2015-04-04
js实现简单的省市县三级联动效果实例
这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下
2016-02-02
JS实现单例模式的N种方案
JS实现单例模式的多种方案，本文稍加总结，列出了6种方式与大家分享，大体上将内容分为了ES5（Function）与ES6（Class）实现两种部分，对js单例模式相关知识感兴趣的朋友跟随小编一起看看吧
2022-09-09
js千分位实现方法大汇总
这篇文章主要介绍了js千分位实现方法大汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
js检查是否关闭浏览器的方法
这篇文章主要介绍了js检查是否关闭浏览器的方法,涉及javascript针对窗口事件的判定与操作相关技巧,需要的朋友可以参考下
2016-08-08
详解Python中logging日志模块在多进程环境下的使用
许多应用程序中都会有日志模块，用于记录系统在运行过程中的一些关键信息，以便于对系统的运行状况进行跟踪。这篇文章给大家主要介绍了在Python中logging日志模块在多进程环境下的使用,需要的朋友可以参考借鉴，下面来一起看看吧。
2016-12-12
如何通过JS实现日历简单算法
这篇文章主要介绍了如何通过JS实现日历简单算法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
详解js创建对象的几种方式和对象方法
这篇文章主要介绍了详解js创建对象的几种方式和对象方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
微信小程序实现发红包功能
这篇文章主要为大家详细介绍了微信小程序实现发红包功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07

Javascript blur与click冲突解决办法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具