我可以在JavaScript的CSS中仅选择子div，而不选择父项吗？

Question

我正在创建日历。当用户单击“天”元素时，我希望他们有一个下拉时间来选择。我有工作。我遇到的问题是，选择下拉的时候，所以是父“天”的元素。这与时间创建另一个下拉列表中选择第一次当。如何在JavaScript中创建一个 if 语句，该语句仅查找子元素单击而不是父元素单击？

JavaScript：

function create_dropdown(day){
        var insertdiv = document.createElement('select');
        insertdiv.className = "times";;
        day.appendChild(insertdiv);
        for(var i=0;i<times_full.length;i++) {
            insertdiv.options[insertdiv.options.length] = new Option(times_full[i], i);
        }
    }

document.querySelectorAll(".day").forEach(day => {
    day.addEventListener("click", event => {
        event.currentTarget.classList.toggle("selected");
        if(event.currentTarget.classList.contains('selected'))
        {
            day.style.backgroundColor='#B0E0E6';
            create_dropdown(day);
        }
        else
        {
            day.style.backgroundColor='transparent';
        }
    });
});


var times_full = [
  "12:00 AM",
  "1:00 AM",
  "2:00 AM",
  "3:00 AM",
  "4:00 AM",
  "5:00 AM",
  "6:00 AM",
  "7:00 AM",
  "8:00 AM",
  "9:00 AM",
  "10:00 AM",
  "11:00 AM",
  "12:00 PM",
  "1:00 PM",
  "2:00 PM",
  "3:00 PM",
  "4:00 PM",
  "5:00 PM",
  "6:00 PM",
  "7:00 PM",
  "8:00 PM",
  "9:00 PM",
  "10:00 PM",
  "11:00 PM"
];

元素图：

Answer 1

保持当前代码不变，只是在侦听器中添加if( even.target.parentElement.matches('.day') ) { }。

（{event.target是实际被单击的元素，而currentTarget是具有附加的侦听器的元素）。

document.querySelectorAll(".day").forEach( day => {
    day.addEventListener("click", event => {
        if( event.target.parentElement.matches('.day') ) {
            event.currentTarget.classList.toggle("selected");
            // etc
        }