JS DOM |Выбор ВСЕХ потомков элемента DOM - PullRequest
Новая
       32

JS DOM |Выбор ВСЕХ потомков элемента DOM

0 голосов
/ 05 марта 2019

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

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

Проблема:

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

Я пытался:

  • Чтобы добавить условие ИЛИ в оператор 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);

1 Ответ

0 голосов
/ 05 марта 2019

Убедитесь, что при вызове 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.

...