Question

我在JS中创建了一个日期选择器。单击具有指定类别的输入时，将触发日期选择器。

当我单击输入或日期选择器的OUT时，它会隐藏。

问题：

当我单击日期选择器时，它会隐藏，因为我没有单击日期选择器本身，而是单击了许多子项之一。

我尝试过：

为IF语句添加OR条件（请参见下面的内容）；
要使用“ 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);

Answer 1

检查在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。

JS DOM |选择DOM元素的所有子元素

1 个答案: