下拉框选择blur与click冲突问题
缘由:今天在做下拉框选择时,遇到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冲突问题的更多相关文章
- 快速解决js开发下拉框中blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...
- Python+selenium之获取文本值和下拉框选择数据
Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...
- Selenium 3----警告框处理+下拉框选择
警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...
- 前端下拉框选择和动态生成调用div
进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...
- 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
- Selenium3 + Python3自动化测试系列八——警告框处理和下拉框选择
警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- PHP下拉框选择的实现方法
实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...
- jquery根据下拉框选择的值显示输入框
原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...
随机推荐
- Android Studio Git 分支使用实践
新公司有些项目是用的 Git,以前公司都是 svn,为了练手 Git,我个人 APP 用到了,但是仅简单的 git pull/push 的使用,并未用到 Git 精髓,只有当项目中用到,才会紧迫去全面 ...
- (网页)jquery-qrcode.js生成二维码
基础用法 <div id="qrcode"></div> <script type="text/javascript"> n ...
- Flume 1.7.0单机版安装
下载解压到/usr/local/flume 配置环境变量 export FLUME_HOME=/usr/local/flume export FLUME_CONF_DIR=$FLUME_HOME/co ...
- 洗礼灵魂,修炼python(69)--爬虫篇—番外篇之feedparser模块
feedparser模块 1.简介 feedparser是一个Python的Feed解析库,可以处理RSS ,CDF,Atom .使用它我们可从任何 RSS 或 Atom 订阅源得到标题.链接和文章的 ...
- SQL Server 锁实验(重建索引)
昨晚某现场报一个重建索引失败的问题,远程查看后发现是自动收缩的内部会话引发的锁申请超时,突然想起来自己的加锁实验还没完成索引重建部分,今天有空正好做一下: USE [数据库名] GO ALTER IN ...
- 9. svg学习笔记-裁剪和蒙版
裁剪 在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在&l ...
- JavaSe: 不要小看了 Serializable
Java中,一个类要支持序列化,我们通常实现Serializable.在使用Serializable,应当制定一个SerialVersionUID,用于代表类的版本.如果不指定会有什么影响呢?在了解这 ...
- redis常用命令及结构
##常用结构及命令: keys * #查询所有key randomkey #随机返回key type key #返回key的类型 exists key #判断key是否存在 del key1 key2 ...
- LeetCode算法题-Contains Duplicate(Java实现)
这是悦乐书的第192次更新,第196篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第52题(顺位题号是217).给定一个整数数组,查找数组是否包含任何重复项.如果数组中至 ...
- Oauth2.0[笔记]
背景 如果资源服务器只是提供资源给自己的应用,使用帐号密码做身份认证倒没什么问题,但如果需要提供资源给第三方应用,就会出现第三方应用需要与资源服务器共享身份凭证,这时会出现几个问题: 1.第三方应用需 ...