ドロップダウン・ボックスの多重化

ドロップダウンボックスはページでよく使われる機能です.selectのスタイルはカスタマイズが複雑で互換性が非常に悪いため、JavaScriptを利用してドロップダウンボックスを模倣することは各フロントエンドerに必要な技術であり、多重化はまた身につけなければならないスキルなので、ここでは私がドロップダウンボックス機能を多重化する際に出会った穴について書きます.

1.グローバルオブジェクト使用とon追加イベントの弊害

    

        
   1
        

    
    

        
  1-1
        
  1-2
        
  1-3
    


    

        
   2
        

    
    

        
  2-1
        
  2-2
        
  2-3
    

这里是两个下拉框的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

機能は書き終わって、使う時やっと問題を発見して、select 2の機能は完璧で、しかし私がselect 1をクリックしてプルダウンボックスが現れた後にdocumentをクリックして、select 1のプルダウンボックスを回収することができません

問題点:

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

ここではdocumentをクリックしてドロップダウンボックスを消して、onの方式でイベントdocumentを追加するのは1つのグローバルオブジェクトで、2つの関数を宣言する時、第1の関数はdocumentにバインドすることをクリックして、宣言の第2の関数もクリックイベントをdocumentにバインドして、この時利用するonはイベントを追加する方式の弊害が出て、第2のイベントは第1のイベントを上書きして、コンソールでlistを出力しようとする時、常に2番目のドロップダウンボックスのリストを出力します

ソリューション:

addEventListener()を使用してイベントを追加します.この方法で追加したイベントは上書きされません.

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

ここでもう一つ問題があります.select 1のbtnをクリックすると、select 1のドロップダウンボックスが現れますが、select 2のbtnをクリックすると、select 1のドロップダウンボックスが消えず、2つのドロップダウンボックスが同時に存在する場合があります.この問題は私が考えて解決策を提出します.