Блог

Я создал средство выбора даты в JS. При нажатии на ввод с указанным классом запускается средство выбора даты.

Когда я выбираю из ввода или средства выбора даты, оно скрывается.

Проблема:

• Когда я нажимаю на средство выбора даты, оно скрывается, потому что я нажимаю не на само средство выбора даты, а на одно из его многочисленных дочерних элементов.

Я пытался:

• Чтобы добавить условие ИЛИ к оператору IF (см. Ниже);
• Чтобы выбрать все дочерние узлы средства выбора даты с помощью «date_picker.childNodes», но оно выбирает только два первых дочерних элемента.

Чего я хочу:

• Выберите все элементы DIV средства выбора даты; поэтому, когда я когда-либо нажимаю на него, оно по-прежнему показывает средство выбора даты. Как? (Если у вас есть какое-либо другое решение, я воспользуюсь им).

Средство выбора даты:

 <div class="date-picker">
    <div class="date-picker-header">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
    <div class="date-picker-body">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>
  

JS запускает средство выбора даты:

 var date_picker = document.querySelector(".date-picker");
var input = document.querySelector(".input-date-picker");

document.addEventListener("mousedown", function(e) {

    // If the INPUT or the DATE_PICKER or any of its children is clicked.
    if(e.target == input || e.target == date_picker || /* date_picker children */) {
        // Triggers the date-picker.
    }
    else {
        // Hides the date-picker.
    }

}, false);
  

Проверьте, closest('.date-picker') возвращает ли вызов target элемента datepicker — если да, то выбранный элемент является либо элементом datepicker, либо одним из его дочерних элементов:

 document.addEventListener("mousedown", function(e) {
    // If the INPUT or the DATE_PICKER or any of its children is clicked.
    if(e.target === input || e.target.closest('.date-picker')) {
        // Triggers the date-picker.
    }
    else {
        // Hides the date-picker.
    }
});
  

Если хотите, можете не указывать третий false параметр, в любом случае сохраняя значение по умолчанию false .