子級未觸發父級功能

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

您可以使用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

與其將事件綁定到文檔，不如嘗試將其綁定到錨標記。 我建議將事件專門綁定到導航欄中的a標簽

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