孩子没有触发父母功能答案

【问题标题】：Child not triggering parent function孩子没有触发父母功能
【发布时间】：2018-08-08 12:18:44
【问题描述】：

我有一个菜单并为文档设置了一个偶数侦听器，如果单击 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>

请注意，如果您单击锚标记而不是其子元素，则该函数将执行。我怎样才能让锚标签的孩子也执行该功能？任何帮助表示赞赏。

【问题讨论】：

“但由于某种原因，当锚标签内的元素被点击时，该功能没有被触发” - 是的。但它并没有做很多，因为你的 if 条件不正确。
这个答案有帮助吗？

标签： javascript jquery html event-bubbling

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

尝试将事件绑定到锚标记，而不是将事件绑定到文档。我建议将事件专门绑定到导航栏中的 a 标签

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

【讨论】：