Child 未触发 parent 函数

Question

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

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>

请注意，如果您单击锚标记而不是它的 children 元素，该函数将执行。如何让 anchors 标签的 children 也执行该功能？任何帮助表示赞赏。

Answer 1

您可以在 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>

Answer 2

在我看来，如果你能改变你的 HTML 和风格会更好。
HTML 你没有理由在锚点内使用 <p> 标签，不需要额外的 JS:

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

CSS(为标签设置样式):

.nav-item a{
  display: block;
  text-decoration: none;
  color:white;
  margin:0;
  padding:0;
  font-size: .9em;
  font-weight: 100;
}

Answer 3

您可以使用 Element.matches api，检查点击的元素是否是您的 a 的子元素。据我所知，事件冒泡是向上的。

document.addEventListener('click', function(e){
    if(e.target.matches('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>

Answer 4

不要将事件绑定到文档，而是尝试将其绑定到锚标记。我建议将事件专门绑定到 navbar

中的 a 标签

let anchor = document.querySelector('.navbar a');
anchor.addEventListener('click', function(e){
   alert('BUTTON CLICKED');
});

Child 未触发 parent 函数

Child not triggering parent function

html

javascript

jquery

event-bubbling