下拉框复用

下拉框是页面中经常需要使用到的一个功能,由于select的样式自定义复杂且兼容性极差,所以利用JavaScript模仿下拉框是每个前端er必备的技术,而复用又是必须掌握的一项技能,所以这里写一写关于我在复用下拉框功能时候碰到的一些坑

1.全局对象使用和on添加事件的弊端

<div id="select1">
    <div class="selcon">
        <div class="sel">下拉框1</div>
        <div class="selbtn"></div>
    </div>
    <ul class="list">
        <li>选项1-1</li>
        <li>选项1-2</li>
        <li>选项1-3</li>
    </ul>
</div>
<div id="select2">
    <div class="selcon">
        <div class="sel">下拉框2</div>
        <div class="selbtn"></div>
    </div>
    <ul class="list">
        <li>选项2-1</li>
        <li>选项2-2</li>
        <li>选项2-3</li>
    </ul>
</div>

这里是两个下拉框的html代码,我们需要跟它们都加上功能,这时候我能想到的方法就是封装一个函数,获取到每个下拉框的包裹层,然后将获取到的对象传入函数的参数,就可以实现功能了

function select(obj){
    var selBtn = obj.querySelector('.selbtn');
    var sel = obj.querySelector('.sel');
    var list = obj.querySelector('.list');
    var opts = obj.querySelectorAll('.list>li');
    selBtn.onclick = function(ev){
        list.style.display = 'block';
        ev.cancelBubble = true;
    };
    for(var i=0;i<opts.length;i++){
        opts[i].onclick = function(){
            sel.innerHTML = this.innerHTML;
            list.style.display = 'none';
        };
    }
    document.onclick = function(){
        list.style.display = 'none';
    }
};
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
select(select1);
select(select2);

功能写完了,在使用时才发现问题,select2的功能是完好的,但是当我点击select1出现下拉框后点击document,无法让select1的下拉框收回

问题所在:

document.onclick = function(){
    list.style.display = 'none';
}

这里是点击document让下拉框消失,用的是on的方式添加事件
document是一个全局对象,声明两个函数时,第一个函数会点击绑定在document身上,声明的第二个函数也会将点击事件绑定在document身上,这时候利用的on添加事件的方式弊端就出来了,第二个事件会将第一个事件覆盖,在控制台尝试输出list的时候,总是输出的是第二个下拉框中的list

解决方案:

使用addEventListener()进行事件添加,通过该方法添加事件不会被覆盖

document.addEventListener('click',function(){
    list.style.display = 'none';
});

这里还存在一个问题,点击select1的btn,select1中的下拉框出现,但是点击select2中的btn时,select1的下拉框不会消失,会存在两个下拉框同时存在的情况,这个问题待我琢磨一下提出解决方案

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 127,704评论 18 546
  • 蝶恋花 剑侠行侠红尘间, 一身义气感动天。 自有一颗玻璃心, 岁岁平安好过年。
    桃源飞雪阅读 15评论 0 0
  • 我是一个小可爱啦啦啦啦啦啦
    我又没蓝了阅读 16评论 0 0
  • 昨天老家的一个叔叔给我打电话,说生意资金转不开了,银行催缴贷款利息。想再给我借10万元钱。说的是声色泪下,让我很难...
    小李非刀阅读 70评论 0 3
  • 或许只是因为孤独~ 晃晃脑袋,清醒清醒~ 上帝把你的门和窗都关上了,是为了不让你分心,专心等候祂为你量身定制的独一...
    慕语Jesus阅读 23评论 0 0