Show/Hide Combobox Dropdown mit reinem Javascript

Question

ich eine Benutzersteuerung in asp.net, die Markup ähnlich dem folgenden Ausgänge:

<div id="combobox1"> 
    <div id="combobox1_text"><span>combobox 1</span></div> 
    <div id="combobox1_ddl"> 
    <input type="checkbox" id="combobox1_$1" /> 
    <label for="combobox1_$1">Item 1</label> 
    <br /> 
    <input type="checkbox" id="combobox1_$2" /> 
    <label for="combobox1_$2">Item 2</label> 
    <br /> 
    <input type="checkbox" id="combobox1_$3" /> 
    <label for="combobox1_$3">Item 3</label> 
    <br /> 
    <input type="checkbox" id="combobox1_$4" /> 
    <label for="combobox1_$4">Item 4</label> 
    <br /> 
    <input type="checkbox" id="combobox1_$5" /> 
    <label for="combobox1_$5">Item 5</label> 
    <br /> 
    </div> 
</div> 

eine JavaScript-Datei begleitet diese Kontrolle hat die folgende Klasse (minimaler Code zu reproduzieren das Problem nur):

ComboBox = function(cb) { 
    var pnlContainer = document.getElementById(cb); 
    var pnlComboBox = document.getElementById(cb + '_text'); 
    var pnlDropdownList = document.getElementById(cb + '_ddl'); 
    var isCollapsed = true; 

    var collapseDropdown = function() { 
    if (!isCollapsed) { 
     isCollapsed = true; 
     pnlDropdownList.style.display = 'none'; 
     //-- some more custom handling code follows here -- 
    } 
    }; 
    pnlComboBox.onclick = function() { 
    isCollapsed = !isCollapsed; 
    pnlDropdownList.style.display = (isCollapsed) ? 'none' : 'block'; 
    }; 
    pnlContainer.onclick = function(event) { 
    event.stopPropagation(); 
    }; 
    document.addEventListener('click', function() { 
    collapseDropdown(); 
    }, false); 
} 

Und schließlich auf meiner Seite erstelle ich eine Instanz der Klasse wie folgt:

cb1 = new ComboBox('combobox1'); 

All dies funktioniert gut, bis nur eine Instanz dieses Steuerelements vorhanden ist. Es klappt korrekt zusammen, wenn etwas oder irgendwo außerhalb des Steuerelements angeklickt wird, genau wie erwartet.

Das Problem:

Das Problem tritt auf, wenn mehr als eine Instanz dieses Steuerelement auf der Seite ist. Wenn eine der Comboboxen geöffnet ist und der Benutzer auf eine andere Instanz meiner Combobox klickt, wird die vorherige nicht minimiert.

https://jsfiddle.net/x8qjo79f/

Ich weiß es, weil die event.stopPropagation() Anruf geschieht, aber nicht wissen, was für dies zu tun:

JsFiddle für minimalen Code, um das Problem zu reproduzieren, sind hier zu finden.

Answer 1

Bearbeiten Sie das Dokument Onclick-Ereignis Listener das Ereignis zu erfassen (also vor der Bubbling-Phase ausgeführt wird) und kollabiert, wenn das Ziel außerhalb Ihres ist Kombinationsfeld.

ComboBox = function(cb) { 
 
    var pnlContainer = document.getElementById(cb); 
 
    var pnlComboBox = document.getElementById(cb + '_text'); 
 
    var pnlDropdownList = document.getElementById(cb + '_ddl'); 
 
    var isCollapsed = true; 
 

 
    var collapseDropdown = function() { 
 
    if (!isCollapsed) { 
 
     isCollapsed = true; 
 
     pnlDropdownList.style.display = 'none'; 
 
     //-- some more custom handling code follows here -- 
 
    } 
 
    }; 
 
    pnlComboBox.onclick = function() { 
 
    isCollapsed = !isCollapsed; 
 
    pnlDropdownList.style.display = (isCollapsed) ? 'none' : 'block'; 
 
    }; 
 
    pnlContainer.onclick = function(event) { 
 
    event.stopPropagation(); 
 
    }; 
 

 
    // Edit: Capture click event 
 
    document.addEventListener('click', function(event) { 
 
    if (!pnlContainer.contains(event.target)) collapseDropdown(); 
 
    }, true); 
 
} 
 

 
cb1 = new ComboBox('combobox1'); 
 
cb2 = new ComboBox('combobox2');

#combobox1, 
 
#combobox2 { 
 
    border: 1px solid black; 
 
    cursor: default; 
 
    width: 200px; 
 
    font-family: verdana; 
 
    font-size: 10pt; 
 
} 
 

 
#combobox1_text, 
 
#combobox2_text { 
 
    padding: 2px; 
 
} 
 

 
#combobox1_ddl, 
 
#combobox2_ddl { 
 
    border-top: 1px solid black; 
 
    display: none; 
 
}

<div id="combobox1"> 
 
    <div id="combobox1_text"><span>combobox 1</span></div> 
 
    <div id="combobox1_ddl"> 
 
    <input type="checkbox" id="combobox1_$1" /> 
 
    <label for="combobox1_$1">Item 1</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox1_$2" /> 
 
    <label for="combobox1_$2">Item 2</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox1_$3" /> 
 
    <label for="combobox1_$3">Item 3</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox1_$4" /> 
 
    <label for="combobox1_$4">Item 4</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox1_$5" /> 
 
    <label for="combobox1_$5">Item 5</label> 
 
    <br /> 
 
    </div> 
 
</div> 
 
<br /> 
 
<input type="text" /> 
 
<br /> 
 
<input type="button" /> 
 
<br /> 
 
<input type="checkbox" /> 
 
<br /> 
 
<span>some random text in the document.. <br />blah. blah.. blah..</span> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<div id="combobox2"> 
 
    <div id="combobox2_text"><span>combobox 2</span></div> 
 
    <div id="combobox2_ddl"> 
 
    <input type="checkbox" id="combobox2_$1" /> 
 
    <label for="combobox2_$1">Item 1</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox2_$2" /> 
 
    <label for="combobox2_$2">Item 2</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox2_$3" /> 
 
    <label for="combobox2_$3">Item 3</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox2_$4" /> 
 
    <label for="combobox2_$4">Item 4</label> 
 
    <br /> 
 
    <input type="checkbox" id="combobox2_$5" /> 
 
    <label for="combobox2_$5">Item 5</label> 
 
    <br /> 
 
    </div> 
 
</div>

Answer 2

Sie können die Ereignisweiterleitung in pnlContainer.onclick zulassen, aber denken Sie daran, dass auf die ComboBox geklickt wurde. In der Ereignisprozedur für den Dokumentklick würden Sie testen, ob die ComboBox die angeklickte ist, und zulassen, dass sie nur dann minimiert wird, wenn dies nicht der Fall ist.

Die Änderungen an den Javascript-Code könnte wie folgt aussehen:

ComboBox = function(cb) { 
    var isClicked = false; 
    ... 
    pnlContainer.onclick = function(event) { 
    isClicked = true; 
    }; 
    document.addEventListener('click', function() { 
    if (isClicked) { 
     isClicked = false; 
    } 
    else { 
     collapseDropdown(); 
    } 
    }, false); 
}