我正在创建日历。当用户单击“天”元素时,我希望他们有一个下拉时间来选择。我有工作。我遇到的问题是,选择下拉的时候,所以是父“天”的元素。这与时间创建另一个下拉列表中选择第一次当。如何在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"
];
元素图:
答案 0 :(得分: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
}