Question

我有一个菜单，并为文档设置了一个均匀的侦听器，如果单击了一个标签，则会执行一个函数，但是由于某些原因，当单击定位标签内的元素时，不会触发该函数。也许我弄错了，但是不是单击子元素时要执行的父函数的默认冒泡行为吗？

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>

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

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 ，您没有理由在锚点和其他JS内使用<p>标签：

<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

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

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;
}

Answer 4

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

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

子级未触发父级功能

4 个答案: