模拟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
本文是自己的一篇学习总结记录,不过我感觉最有用的还是对自己的触动。因为平时都习惯于第一种方式去实现功能,特别是在业务开发过程中,第一选择肯定是自己常用的。还是在空闲时候才有心情去优化。
这时候才清晰的理解我们所谓的读优秀开源作品源码,学习的是什么,不要为了读源码而读源码,有目的有思维的读才能学习更多。望诸君共勉,再次对参考文章表示感谢。

posted @ 2019-03-17 21:43 潇湘待雨 阅读(...) 评论(...) 编辑 收藏