缘由:今天在做下拉框选择时,遇到click和blur冲突问题;具体现象如下

  1、intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框

  2、点击选择(click事件)下拉框内容时获取值,然后intput失去焦点(blur事件)隐藏下拉框

  3、发现click事件无效,blur事件会优先于click事件执行,导致click事件无效

解决:使用mousedown替换click使点击选择事件优先执行

  mousedown事件:当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件。
  mouseup事件:当在元素上放松鼠标按钮时,会发生mouseup事件。
  注意:
  (1)mousedown与click 事件不同,mousedown事件仅需要按键被按下,而不需要松开即可发生。
  (2)mouseup与click事件不同,mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

---------------------
原文:https://blog.csdn.net/ligang2585116/article/details/51764828
---------------------

***********************************************************

学习永远不晚。——高尔基

***********************************************************

下拉框选择blur与click冲突问题的更多相关文章

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

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

  2. Python+selenium之获取文本值和下拉框选择数据

    Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...

  3. Selenium 3----警告框处理+下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  4. 前端下拉框选择和动态生成调用div

    进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...

  5. 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  6. Selenium3 + Python3自动化测试系列八——警告框处理和下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  7. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  8. PHP下拉框选择的实现方法

    实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...

  9. jquery根据下拉框选择的值显示输入框

    原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...

随机推荐

  1. 我喜欢 Google Flutter

    在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库. 正如你所想的那样,Flutter 是能够帮助创建拥有漂亮 UI 界面的跨平台 ...

  2. (其他)Thinkpad笔记本装系统

    电脑城装一次系统收你40元,不如自己装系统. 虽然百度上装系统的文章泛滥,但是还是自己尝试. 前3个小时thinkpad e570是不是坏掉了,怎么就进不去BIOS,这个时候直接搜索这个型号,问题输入 ...

  3. vue自动完成搜索功能的数据请求处理

    在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...

  4. java调用天气预报接口案例

    免费天气接口:http://mobile.weather.com.cn/data/sk/城市ID.html 例如: http://mobile.weather.com.cn/data/sk/10124 ...

  5. 确认是否是因为做了物理I/O而导致的性能不佳

    要获取语句是否进行了I/O,需要打开set statistics on 和set statistics on.

  6. 【MM系列】SAP里批量设置采购信息记录删除标记

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP里批量设置采购信息记录删除标记 ...

  7. Java学习笔记--Cglib动态代理

    CGLib动态代理 使用JDK创建代理有一个限制,即它只能为接口创建代理实例,这一点可以从Proxy的接口方法newProxyInstance(ClassLoader loader,Class[] i ...

  8. git 使用及常用命令介绍

    一.git 常用命令 git clone 地址 克隆项目 git status 查看当前状态 git add 文件或文件夹 (加入本地暂存目录) git commit -m "注释" ...

  9. display:table-cell几种应用

    http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E ...

  10. 深入理解Zuul之源码解析

    转载:http://blog.csdn.net/forezp/article/details/76211680 Zuul 架构图 在zuul中, 整个请求的过程是这样的,首先将请求给zuulservl ...