下拉框选择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
---------------------

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

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

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

原文地址:https://www.cnblogs.com/chengd/p/10357575.html

时间: 2024-11-05 15:53:53

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

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

在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以.click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 1 2 3 4 5 6 7 8 9 10 11 12 13 <input type="te

分类编码下拉框选择自动带出分类名称

<asp:TableCell> <ig:WebDropDown runat ="server" ID="txtClassNo" Width ="200" OnSelectionChanged="webDropdownOnchange" EnableClosingDropDownOnSelect="true" AutoPostBack="true" ></ig

jQuery实现下拉框选择图片的功能

让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. <!DOCTYPE html> <head> <title>支持图片选择的jQuery列表框插件imageselect.js</title> <script type="text

下拉框选择效果的实现原理

导航栏与下拉框的效果 实现的效果是在导航栏中间出现下拉框选择的效果,当选择某一个时,则上面的字也相应进行修改(此实例代码可以看Coding.net的源代码),这边有把它单独提取出来进行测试,源代码下载:接下来将简单介绍一下此实现的方式及主要代码: 1:因为我们是跟导航栏进行结合,所以这边用到的NavigationController,我们把这个页面的效果放在viewController中,弹出来的下拉列表这边是以表格的形式存在,每个则是表格的一行,行里面包括图标跟文字: 首先看一下AppDele

selenium-Python之定位下拉框选择

1.通过select 进行定位下拉框 下拉框如图所示 通过代码定位 #通过index进行选择Select(driver.find_element_by_id("cardType")).select_by_index(1)#通过value进行选择#Select(driver.find_element_by_id("cardType")).select_by_value(1)#通过选项文字进行选择#Select(driver.find_element_by_id(&qu

easyui 绑定下拉框,下拉框选择改变事件的触发方法

//①定义下拉框 //离线公司[个人或公司] 下拉框 var tmpComOrPer = { type: 'combobox', options: { onSelect:function(data) { ComOrPerChange(false); }, editable:false, panelHeight: 'auto', valueField: 'Type', textField: 'label', data: [ { label: '@BaseRes.OSP_CTL_087', Type

下拉框选择数据—联查

在页面中的分组下拉列表中选择的一条分组数据,在后面人员框中显示该分组下的所有人员(注意人员有多个,用户可以选择任意多个人员) 由于分组人员数据较少,所以在第一次查询时已经查询出所有分组下的所有人员信息,前台根据下拉框筛选具体的人员,代码为: //后台传给前台的数据位String格式 str ="group1:user1,user2,user3;group2:user1,user2,user3;" //前台将str转成map格式 var map = {}; var str = "

下拉框选择效果的实现原理2

效果如下 原理:使用第三方XTSegmentControl作为上面选项卡的实现,而弹出视图则是滚动视图跟每一行里面的UIBUTTON结合打勾图标相结合的实现方式:源代码可以下载开源项目Coding.net里的任务模块:这边将分简单的贴出其主要的代码 1:首先是主页面的代码: // 添加滑块 分三组 _one = @[@"全部讨论", @"我的讨论"]; _two = [NSMutableArray arrayWithObjects:@"全部标签"

下拉框选择

<select name="sel0" selectedindex="0" id="sel01" onchange="zy_selectmenu(this.id)"> <option value="">请选择</option> <option value="50000194">维修管理部</option> <option