javascript - 孩子没有触发父母功能
问题描述
我有一个菜单并为文档设置了一个均匀的侦听器,如果单击 a 标签,则会执行一个函数,但由于某种原因,当单击锚标签内的元素时,该函数不会被触发。也许我弄错了,但是当单击子元素时,父函数的默认冒泡行为不是执行吗?
document.addEventListener('click', function(e){
if(e.target.tagName=="A"){
alert('BUTTON CLICKED');
}
})
body {
padding:0;
margin:0;
background-color: #252526;
}
* {
box-sizing: content-box;
font-family: 'arial', 'Arial';
}
a {
text-decoration: none;
color:white;
}
header {
position: fixed;
z-index:10;
background-color:#2e2f30;
bottom: 0;
left:0;
right:0;
padding: 10px 0px;
display: block;
}
nav {
display: block;
}
ul.navbar, li.nav-item {
list-style-type: none;
padding:0;
margin:0;
}
.navbar {
width:100%;
position: relative;
display: flex;
}
.nav-item {
width:25%;
text-align: center;
color:white;
}
.nav-item p {
margin:0;
padding:0;
font-size: .9em;
font-weight: 100;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="navbar">
<li class="nav-item">
<a href="#home">
<i class="fas fa-home"></i>
<p>Home</p>
</a>
</li>
</ul>
</nav>
</header>
<div class="page active-page" id="home">
</div>
请注意,如果您单击锚标记而不是其子元素,则该函数将执行。我怎样才能让锚标签的孩子也执行该功能?任何帮助表示赞赏。
解决方案
您可以在OR
运算符中使用另外一个条件e.target.parentNode.tagName == "A"
来检查锚元素是否是单击元素的父元素,并且它将为您工作:
document.addEventListener('click', function(e){
if(e.target.tagName=="A" || e.target.parentNode.tagName == "A"){
alert('BUTTON CLICKED');
}
})
body {
padding:0;
margin:0;
background-color: #252526;
}
* {
box-sizing: content-box;
font-family: 'arial', 'Arial';
}
a {
text-decoration: none;
color:white;
}
header {
position: fixed;
z-index:10;
background-color:#2e2f30;
bottom: 0;
left:0;
right:0;
padding: 10px 0px;
display: block;
}
nav {
display: block;
}
ul.navbar, li.nav-item {
list-style-type: none;
padding:0;
margin:0;
}
.navbar {
width:100%;
position: relative;
display: flex;
}
.nav-item {
width:25%;
text-align: center;
color:white;
}
.nav-item p {
margin:0;
padding:0;
font-size: .9em;
font-weight: 100;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="navbar">
<li class="nav-item">
<a href="#home">
<i class="fas fa-home"></i>
<p>Home</p>
</a>
</li>
</ul>
</nav>
</header>
<div class="page active-page" id="home">
</div>
推荐阅读
- google-apps-script - 链接公式更改时如何在谷歌表格中创建时间戳
- c# - 从本地系统帐户向不同帐户添加凭据
- sql - 提取月份编号并将其转换为 SQL Server 中的月份名称
- django - 我们可以自定义整个 Django 管理站点吗?
- entity-framework - 使用 dotnet ef 迁移创建数据库时如何设置字符集?
- angular - 角度形式不采用初始值
- instagram - cURL https://www.instagram.com/{USERNAME}/?__a=1 从生产服务器返回 Instagram 登录页面
- angular - 角材料表 - 行索引不一致
- xamarin - 无法在 Xamarin 中启动 android 模拟器
- sql - 缓慢的表加载