Javascript 子函数不触发父函数

我有一个菜单，为文档设置了一个偶数侦听器，如果单击了a标记，则会执行一个函数，但由于某种原因，当单击锚标记内的元素时，不会触发该函数。也许我弄错了，但单击子元素时父函数执行的默认冒泡行为不是吗

document.addEventListener（'click'，函数（e）{
如果（e.target.tagName==“A”）{
警报（“点击按钮”）；
}
})

正文{
填充：0；
保证金：0；
背景色：#252526；
}
* {
框大小：内容框；
字体系列：“arial”、“arial”；
}
a{
文字装饰：无；
颜色：白色；
}
标题{
位置：固定；
z指数：10；
背景色：#2e2f30；
底部：0；
左：0；
右：0；
填充：10px 0px；
显示：块；
}
导航{
显示：块；
}
ul.navbar，li.nav-item{
列表样式类型：无；
填充：0；
保证金：0；
}
navbar先生{
宽度：100%；
位置：相对位置；
显示器：flex；
}
.导航项目{
宽度：25%；
文本对齐：居中；
颜色：白色；
}
.导航项目p{
保证金：0；
填充：0；
字体大小：.9em；
字号：100；
}

您可以使用

或
操作符中的另一个条件作为
e.target.parentNode.tagName==“A”
来检查锚元素是否是单击元素的父元素，并且它将对您起作用：


document.addEventListener（'click'，函数（e）{
如果（e.target.tagName==“A”| | e.target.parentNode.tagName==“A”）{
警报（“点击按钮”）；
}
})
正文{
填充：0；
保证金：0；
背景色：#252526；
}
* {
框大小：内容框；
字体系列：“arial”、“arial”；
}
a{
文字装饰：无；
颜色：白色；
}
标题{
位置：固定；
z指数：10；
背景色：#2e2f30；
底部：0；
左：0；
右：0；
填充：10px 0px；
显示：块；
}
导航{
显示：块；
}
ul.navbar，li.nav-item{
列表样式类型：无；
填充：0；
保证金：0；
}
navbar先生{
宽度：100%；
位置：相对位置；
显示器：flex；
}
.导航项目{
宽度：25%；
文本对齐：居中；
颜色：白色；
}
.导航项目p{
保证金：0；
填充：0；
字体大小：.9em；
字号：100；
}





您可以使用
或
操作符中的另一个条件作为
e.target.parentNode.tagName==“A”
来检查锚元素是否是单击元素的父元素，并且它将对您起作用：


document.addEventListener（'click'，函数（e）{
如果（e.target.tagName==“A”| | e.target.parentNode.tagName==“A”）{
警报（“点击按钮”）；
}
})
正文{
填充：0；
保证金：0；
背景色：#252526；
}
* {
框大小：内容框；
字体系列：“arial”、“arial”；
}
a{
文字装饰：无；
颜色：白色；
}
标题{
位置：固定；
z指数：10；
背景色：#2e2f30；
底部：0；
左：0；
右：0；
填充：10px 0px；
显示：块；
}
导航{
显示：块；
}
ul.navbar，li.nav-item{
列表样式类型：无；
填充：0；
保证金：0；
}
navbar先生{
宽度：100%；
位置：相对位置；
显示器：flex；
}
.导航项目{
宽度：25%；
文本对齐：居中；
颜色：白色；
}
.导航项目p{
保证金：0；
填充：0；
字体大小：.9em；
字号：100；
}





在我看来，如果你改变你的HTML和样式会更好

HTML您没有理由在锚点内使用
标记，不需要额外的JS：

<li class="nav-item">
  <a href="#home">
    <i class="fas fa-home"></i>
    Home
  </a>
</li>

在我看来，如果你改变你的HTML和样式会更好

HTML您没有理由在锚点内使用
标记，不需要额外的JS：

<li class="nav-item">
  <a href="#home">
    <i class="fas fa-home"></i>
    Home
  </a>
</li>

您可以使用
元素.matches
api来检查单击的元素是否是
a
的子元素。据我所知，事件的泡沫上升


document.addEventListener（'click'，函数（e）{
如果（例如target.matches（'a*'））{
警报（“点击按钮”）；
}
})

正文{
填充：0；
保证金：0；
背景色：#252526；
}
* {
框大小：内容框；
字体系列：“arial”、“arial”；
}
a{
文字装饰：无；
颜色：白色；
}
标题{
位置：固定；
z指数：10；
背景色：#2e2f30；
底部：0；
左：0；
右：0；
填充：10px 0px；
显示：块；
}
导航{
显示：块；
}
ul.navbar，li.nav-item{
列表样式类型：无；
填充：0；
保证金：0；
}
navbar先生{
宽度：100%；
位置：相对位置；
显示器：flex；
}
.导航项目{
宽度：25%；
文本对齐：居中；
颜色：白色；
}
.导航项目p{
保证金：0；
填充：0；
字体大小：.9em；
字号：100；
}





您可以使用
元素.matches
api来检查单击的元素是否是
a
的子元素。据我所知，事件的泡沫上升


document.addEventListener（'click'，函数（e）{
如果（例如target.matches（'a*'））{
警报（“点击按钮”）；
}
})

正文{
填充：0；
保证金：0；
背景色：#252526；
}
* {
框大小：内容框；
字体系列：“arial”、“arial”；
}
a{
文本装饰