缘由:今天在做下拉框选择时,遇到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. websocket 与 tornado 的结合

    对于socket是不陌生的,但是对于websocket我却是陌生的,不同于https,在网页中使用websocket可以同样起到ajax的作用,默默发送数据... 在script中: ws = new ...

  2. 你不可不知的Java引用类型之——虚引用

    定义 虚引用是使用PhantomReference创建的引用,虚引用也称为幽灵引用或者幻影引用,是所有引用类型中最弱的一个.一个对象是否有虚引用的存在,完全不会对其生命周期构成影响,也无法通过虚引用获 ...

  3. springboot 学习之路 6(集成durid连接池)

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

  4. eclipse配置环境变量 (特别是输入javac无显示问题)

    下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 最近win10恢复了一下系统,重新给eclipse配一 ...

  5. spring applicationContext.xml最全约束

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. 纯JS编写打地鼠游戏

    这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很LOW但是对于新手来说很一般般吧~ 没有上传音乐文件了 运行效果: 上代码(HTML+JS): <!DOCTYPE html> < ...

  7. xtrabackup部署以及使用

    简介 备份mysql数据库一直是一个比较恶心的工作,主要就是备份的数据库比较大实在是慢.最近开始使用xtrabackup来备份数据库,速度上快了很多,尤其还原速度要快的多.下面我将从安装开始简要介绍一 ...

  8. SQL server 获得 表的主键,自增键

    主键: @tableName --表名 @id ---表对应的id SELECT SYSCOLUMNS.name FROM SYSCOLUMNS,SYSOBJECTS,SYSINDEXES,SYSIN ...

  9. 同步下的资源互斥:停运保护(Run-Down Protection)机制

    背景 近期在学习ProcessHacker的源码,Process Hacker是一个免费的.功能强大的"任务管理器",可用于监听系统资源的使用情况,调试软件以及检测恶意程序.使用中 ...

  10. ELK-elkstack-使用消息队列

    日志通过logstash收集到redis,之后从logstash从redis读取数据存入到ES 1. logstash使用redis测试 通过标准输入到redis中 logstash配置与启动 [yu ...