快速解决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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
js实现简单图片拖拽效果
Feb 22 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
解析dedeCMS验证码的实现代码
2013/06/07 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
js模拟微博发布消息
2017/02/23 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python for 循环获取index索引的方法
2019/02/01 Python
python文件选择对话框的操作方法
2019/06/27 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
舞蹈教育学专业求职信
2014/06/29 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
参加招聘会后的感想
2015/08/10 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL