В коде ниже присутствуют 2 метода. _open и _close, которые изменяют видимость элемента (ul списка). _open генерируется при клике на кнопку, делает видимым список и навешивает новый обработчик на onclick. В дальнейшем, при клике на любой области кроме кнопки и списка, список должен свернуться обратно. Но каким образом возможно удалить ранее навешанный обработчик? Понимаю, что его нужно как - то занести в отдельную переменную, но в реалиях прототипа у меня картины особо не выстраивается итоговой.
class CustomSelect{
constructor(options){
this._elem = options.elem;
this._elem.onclick = this._onClick.bind(this);
}
_onClick(event){
let target = event.target;
if (target.closest('.title')) this._open();
else this._close();
}
_open(){
this._elem.classList.add('open');
document.addEventListener('click', this._onClickOutside.bind(this));
}
_close(){
this._elem.classList.remove('open');
document.removeEventListener('click', this._onClickOutside.bind(this));
}
_onClickOutside(e){
if (!this._elem.contains(e.target))
this._close();
}
}
var animalSelect = new CustomSelect({
elem: document.getElementById('animal-select')
});
.customselect {
width: 200px;
font-size: 14px;
display: inline-block;
}
.customselect .title {
height: 20px;
border: 2px groove #ADD8E6;
background: white;
width: 200px;
box-sizing: border-box;
padding: 2px;
line-height: 14px;
cursor: pointer;
text-align: left;
}
.customselect li {
padding: 2px;
cursor: pointer;
}
.customselect li:nth-child(even) {
background-color: #f0f8ff;
}
.customselect li:hover {
background-color: #7fffd4;
}
.customselect ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 1000;
background: white;
width: 200px;
border-bottom: 1px solid #add8e6;
border-left: 1px solid #add8e6;
border-right: 1px solid #add8e6;
box-sizing: border-box;
}
.customselect.open ul {
display: block;
}
<div id="animal-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<!-- значение хранится в свойстве data-value -->
<li data-value="bird">Птицы</li>
<li data-value="fish">Рыбы</li>
<li data-value="animal">Звери</li>
<li data-value="dino">Динозавры</li>
<li data-value="simplest">Одноклеточные</li>
</ul>
</div>
this._onClickOutside.bind(this)
каждый раз создает новую функцию. Вы можете ее сохранить, а потом использовать вremoveEventListener