下拉框选择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 IPC机制(一)开启多进程
1. 为何要开启多进程 为何开启android应用要开启多进程,主要有以下几点: 单进程所分配的内存不够,需要更多的内存.在早期android系统只为一个单进程的应用分配了16M的可用内存,随着手机的 ...
- html之head标签
本文内容: head标签 介绍 常用子标签 meta title link style script 首发时间:2018-02-12 修改: 2018-04-24:修改了标题名称,重新排版了内容,使得 ...
- Scala路径依赖【内部类】
package big.data.analyse.scala.path_dependence /** * 路径依赖 * Created by zhen on 2018/12/24. */ // 定义外 ...
- [20190328]简单探究sql语句相关mutexes.txt
[20190328]简单探究sql语句相关mutexes.txt --//摘要:http://www.askmaclean.com/archives/understanding-oracle-mute ...
- C#-判断语句(五)
判断语句主要有if...else.switch和 条件?语句1:语句2 三种,而if...else中又有if语句,if...else.if...else if...else和if中嵌套if这几种,但是 ...
- Java的sql动态参数
在C#的方法中可以使用params Parameter[] values来动态获取sql语句中的参数值数组.Java中可以自己封装出一个类似于C#的方法 1.获取结果集 /** * 获取结果集 * @ ...
- timeout 命令
命令简介 运行指定的命令,如果在指定时间后仍在运行,则杀死该进程.用来控制程序运行的时间. 使用方法 1 2 3 timeout [选项] 数字[后缀] 命令 [参数]... 后缀 s 代表秒(默认值 ...
- Windows下强制删除文件或文件夹(解除文件占用/Unlock)
前言 在windows下,有时候会碰到一些文件无法删除,尽量使用“管理员取得所有权” ,但文件或文件夹依然无法删除,这一点非常苦恼. 本文记录几款可以解锁文件占用的软件. ProcessHacker ...
- ps流提取H264并解码播放
因为需要从海康ps流中提取H264数据并进行解码播放,才有了这篇文章.因为是视频编解码领域的纯入门新手,个别理解或者方法有误,需要自行判断,不过相关方法已经测试通过,对于 像我这样的新手还是有一定的借 ...
- 13.scrapy框架的日志等级和请求传参
今日概要 日志等级 请求传参 如何提高scrapy的爬取效率 今日详情 一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是s ...