模拟select,隐藏下拉列表的几种实现
前言
平时开发过程中,出于各种原因模拟原生slect的要求并不算少见。
在实现的过程中,点击其他区域隐藏下拉列表,又是一个必备的功能,
最近在一次开发的过程中引发了点思考,做下总结。
现象
实际中的实现比较复杂,列表中还要增删改查等操作。这里就只放个最简单的demo。
目的是点击select以外的其他区域,隐藏下拉列表。
效果大概这个样子(简单粗暴纯演示用):
首先这确实不难实现,上来像方法一一样撸袖子干就完了
开始之前,先列下基本结构,待会好描述:
外层一个warper,里面是Input,下面就是ul,li绑定点击事件。
<div className="match-select-warper" name={`this.idName`}>
<Input></Input>
<ul className={`${showOption ? '' : 'hidden'}`}>
<li onClick={this.clickHanler}>{问题1}</li>
<li onClick={this.clickHanler}>{问题1}</li>
</ul>
</div>
// 点击列表,提示并隐藏弹框
clickHanler(){
alert('1')
this.changeShow(false)
}
实现方式有下面这么几种:
实现一:全局监听点击事件,判断是否为select区域的子元素。
这是原本比较熟悉和一直在使用的方式:
//组件挂载之后添加事件
componentDidMount(){
// 非匿名函数的目的在于移除时解除事件
this.clickTriggerHandler = ((idName) => {
let id = idName;
return (event) => {
// 是否属于子元素
!isParent(id, event.target) && (this.changeShow(false));
}
})(this.idName)
document.addEventListener('click', this.clickTriggerHandler)
}
componentWillUnmount() {
// 若绑定事件,则移除该事件
if(this.clickTriggerHandler){
document.removeEventListener('click', this.clickTriggerHandler)
}
}
至于如何判断事件元素的归属也比较常见:
判断当前元素的父元素是否为置顶元素,不满足则循环上溯祖先元素,直到document。
/**
* 判断是否属于指定元素的子元素
* @param {*} id 指定元素的标识
* @param {*} dom 触发事件的dom
*/
const isParent=(id, dom)=>{
let tempNode = dom.parentNode;
while (tempNode && tempNode !== document) {
// 满足则返回true
if (tempNode.getAttribute('name') == id) {
return true;
} else {
// 否则继续获取祖先元素
tempNode = tempNode.parentNode;
}
}
// 最终返回false
return false;
}
这样达到了我们的目的,不过是有些缺点的。
缺点一:性能消耗
每次都溯源去判断,性能消耗是个问题,特别是稍微复杂页面,展示多个组件时。
缺点二:受其他dom元素行为影响
假如有元素阻止了冒泡,如果点到了这个元素,那么全局就监听不到该事件了。
<button onClick={(e) => {
e.nativeEvent.stopImmediatePropagation();
alert('我就是来阻止冒泡的')
}}>测试</button>
那么效果就如下图所示了:
此外实现方式总感觉不够优雅,所以我们应该考虑其他实现方式。
实现二:select元素的焦点事件
可能一开始思维固话之后,就不太好转变,因为上面的方式是一直所熟悉的,一时想不到其他方法。
这时候可以去跟别人交流一下(这里的交流包括但不限于老司机面谈,搜索某种实现思路,优秀开源框架)。
得到了另一个方向:点击其他区域的时候,意味着当前区域失去了焦点,
基于这一点可以从input操作了。
<div className="match-select-warper" name={`${this.idName}`}>
<Input
onFocus={(e) => {
// 聚焦或者失焦时,完全可以操作
this.changeShow(true)
}}
onBlur={(e) => {
this.changeShow(false)
}}
></Input>
<ul className={`${showOption ? '' : 'hidden'}`}>
<li onClick={this.clickHanler}>{问题1}</li>
<li onClick={this.clickHanler}>{问题1}</li>
</ul>
</div>
这样看起来很美好,但是点击列表的时候,直接关闭了,没有执行this.clickHanler回调。
因为下拉列表操作点击的时候,其实对于Input而言也是失去焦点。
所以先执行了input的onBlur,隐藏列表,state更新之后,
列表的click操作并没有得到相应。
既然是执行顺序的问题,那么我们可以有下面两种解决思路:
2.1 事件执行顺序不变,修改回调事件执行时机
既然blur执行顺序在前,重新渲染后会影响后续执行,那么我们将blur事件的回调延迟执行,即不立即去setState,那么li的click事件就会执行,然后再去隐藏列表。
至于如何延迟执行,显然就是我们的万能setTimeout了:
<div className="match-select-warper" name={`${this.idName}`}>
<Input
onFocus={(e) => {
// 聚焦或者失焦时,完全可以操作
this.changeShow(true)
}}
onBlur={(e) => {
// 延迟执行 blur的回调,先执行
setTimeout(this.changeShow.bind(this,false),200)
}}
></Input>
<ul className={`${showOption ? '' : 'hidden'}`}>
<li onClick={this.clickHanler}>{问题1}</li>
<li onClick={this.clickHanler}>{问题1}</li>
</ul>
</div>
这样可以满足我们的需求,此外还有另一种方式
2.2 改变事件执行顺序,即使用触发时机在blur之前的事件来替换click,即mouseDown
大致说下几个事件的执行顺序(毕竟我对这方面掌握的也不是很不足,所以后面也会专门总结下相关内容)。
// 这里也顺便解释了下问题出现的原因
mousedown->blur->mouseup->click
既然click触发时机晚于blur,那我们换成mouseDown不就绕过去了。
<div className="match-select-warper" name={`${this.idName}`}>
<Input
onFocus={(e) => {
// 聚焦或者失焦时,完全可以操作
this.changeShow(true)
}}
onBlur={(e) => {
// 延迟执行 blur的回调,先执行
setTimeout(this.changeShow.bind(this,false),200)
}}
></Input>
// 列表的选择回调在mousedown时执行
<ul className={`${showOption ? '' : 'hidden'}`}>
<li onMouseDown={this.clickHanler}>{问题1}</li>
<li onMouseDown={this.clickHanler}>{问题1}</li>
</ul>
</div>
效果同上,这里就不重复放图了。
如果我们的目的是点击列表的时候,完全不触发blur事件,可以在clickHanler回调里加上event.preventDefault(),这样就不会按照原来的顺序出发blur事件了。例如这里:
// 本身自行处理了列表显示,就不用调用blur事件了
clickHanler(event){
event.preventDefault()
alert('1')
this.changeShow(false)
}
具体是否阻止默认事件,就看具体应用了,示例代码这里就没有阻止默认事件,
而是将列表的显示隐藏全交给焦点事件来处理。
// 只关注点击的逻辑,公共逻辑交给blur统一管理
clickHanler(){
alert('1')
}
方式三: 下拉列表显示时增加背景遮罩
即点击其他区域时,点击的是背景mask,交给他来统一处理。
因为这样点击存在一个比较明显的问题,如果想要点击其他元素例如radio时,需要二次点击。
所以这里就不去折腾这种实现了。
结束语
参考文章和组件
浏览器点击屏幕事件触发顺序
eagle-ui
https://segmentfault.com/q/1010000004950602
本文是自己的一篇学习总结记录,不过我感觉最有用的还是对自己的触动。因为平时都习惯于第一种方式去实现功能,特别是在业务开发过程中,第一选择肯定是自己常用的。还是在空闲时候才有心情去优化。
这时候才清晰的理解我们所谓的读优秀开源作品源码,学习的是什么,不要为了读源码而读源码,有目的有思维的读才能学习更多。望诸君共勉,再次对参考文章表示感谢。
模拟select,隐藏下拉列表的几种实现的更多相关文章
- 模拟select样式,自定义下拉列表为树结构
效果图如下: 首先,需要用到的库jQuery,zTree(官网API:http://www.treejs.cn/v3/api.php) 注意:因为zTree是基于jQuery的,所以应该先引入jQue ...
- ul -- li 模拟select下拉框
在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...
- div 模拟<select>事件
IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...
- 模拟select控件,css模拟下拉
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="t ...
- Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells
本篇主要包括: ■ Page Header■ Breadcrumbs■ Button Groups■ Dropdowns■ Button Dropdowns■ 用Button和Dropdo ...
- div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
随机推荐
- 川普和习G-20会面为缓和中美贸易战提供了很大的机会
川普和习将于这周在Buenos Aires(阿根廷首都)会面,互相商讨虚弱经济全球化的最大威胁. 自从川普在今年七月第一次开始提高中国商品关税之后,对全球的投资者和逐渐削弱的经济活动来说,两位领导人可 ...
- Hadoop基础-镜像文件(fsimage)和编辑日志(edits)
Hadoop基础-镜像文件(fsimage)和编辑日志(edits) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看日志镜像文件(如:fsimage_00000000000 ...
- Hbase 元数据一致性检查(转)
最近在学习HBase先关的知识,顺便做一下笔记,以加深知识的了解和掌握. Hbase常用工具 文件检测修复工具 hbase hbck -help 常用选项: -details 显示所有region检查 ...
- Matlab调用Java类
第一步:定位Matlab中Java环境的ext目录 新建一个M script文件,或者直接在Matlab的交互式命令行中输入: >> disp(java.lang.System.getPr ...
- ZooKeeper-客户端命令 zkCli
执行 bin/zkCli 文件进入客户端 查看帮助 help ZooKeeper -server host:port cmd args stat path [watch] set path data ...
- JS的基础知识回顾
前言:JS应用在浏览器端,基于浏览器事件执行,功能十分强大,不容错过
- Git Gerrit使用
Git Gerrit 操作都用 git bash操作: 如果想用 cmd 或者 PowerShell,系统环境变量 Path 添加 Git 安装路径,如: C:\Program Files (x86) ...
- 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
一. 说在前面的话 本节主要在前面章节的基础上补充了几个简单的知识点,比如:第三方调用通过 GlobalHost.ConnectionManager.GetHubContext<MySpecHu ...
- Node.js实战项目学习系列(5) node基础模块 path
前言 前面已经学习了很多跟Node相关的知识,譬如开发环境.CommonJs,那么从现在开始要正式学习node的基本模块了,开始node编程之旅了. path path 模块提供用于处理文件路径和目录 ...
- Mysql漏洞修复方法思路及注意事项
[系统环境] 系统环境:Red Hat Enterprise Linux Server release 5.4 (Tikanga) + 5.7.16 MySQL Community Server ...