快速解决js开发下拉框中blur与click冲突


Posted in Javascript onOctober 10, 2016

在开发中我们会经常遇到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);

补充: js、jquery 中 blur事件和click事件冲突

问题说明:
在表单验证中,我们往往会在输入框失去焦点时触发一个blur事件,但当失去焦点后点击了一个按钮,这时blur事件和click事件就都触发了,由于js是单线程的所以就出现了问题,现在需要让blur先执行验证,然后在触发click事件。

解决方法:

给按钮的click事件设置延迟执行setTimeOut(fn,100),延迟时间的设置要大于blur事件的执行时间,这样就会在blur事件执行完后在执行click事件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 #Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 #Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 #Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 #Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 #Javascript
jQuery继承extend用法详解
Oct 10 #Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
来自PHP.NET的入门教程
2006/10/09 PHP
PHP 远程关机实现代码
2009/11/10 PHP
第五章 php数组操作
2011/12/30 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
JS实现滑动插件
2020/01/15 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python循环结构的应用场景详解
2019/07/11 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
七年级生物教学反思
2014/01/30 职场文书
医疗纠纷协议书
2014/04/16 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
肖申克救赎观后感
2015/06/02 职场文书
电影雨中的树观后感
2015/06/15 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL