如何創建一個單擊事件，其中我有多個 div，並且每個 div 都有一個具有相同 Id 的按鈕，但單擊時僅影響父 div，如何？

Question

我的主要問題是我不想寫幾行代碼（javascript），甚至不想重復自己，代碼看起來像這樣

  <div class="main-div">
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
  </div>  

現在我想將事件偵聽器添加到 id 'myBtn' 以便如果單擊它，則具有 'myDiv' 類的子父 div 將縮放兩次並在中心位置增加高度，但這並不重要，我的主要焦點是我將如何使用 javascript 只選擇按鈕所在的子 div 而不是選擇整個 div，我將如何使用更少的代碼行來做到這一點？ 或者我應該提供多少信息？

Answer 1

您可以在父 div 周圍附加一個事件處理程序，然后捕捉您的子按鈕，因此可以隨心所欲地處理它們

 document.querySelector('.main-div').addEventListener('click', (e) => {
   console.log(e.target)
 })

Answer 2

在保持 DRY 的同時定位一個按鈕的祖先的一種方法是將全局事件處理程序與element.closest方法結合使用。

 // pro-tip: instead of window choose an appropriate common ancestor as event-target // this prevents unnecessary work by the browser, improving performance window.addEventListener('click', ({ target }) => { // select the closest ancestor of our click-target with the `myBtn`-class const btn = target.closest('.myBtn'); // if we didn't click on a button, `btn` is null and we do nothing // this prevents triggering on clicks we don't care about if (btn) { // add the `clicked`-class to the parent of the button btn.parentElement.classList.add('clicked'); } });

 .clicked { border: 1px solid red; }

 <div class="main-div"> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> </div> <div class="main-div"> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div> </div>

Answer 3

您可以使用querySelectorAll方法和 forEach 方法來使用您的類獲取所有按鈕。 此外，為了更好的coding實踐，元素id's必須是唯一的。 Simple和time節約的方法：

另外，不要使用 window eventListener因為它們是全局的，可能會影響頁面上的其他事物元素。 將事件偵聽器附加到實際按鈕。

使用toggle方法使用e.target.parentElement remove和add類myDiv

演示：

 let getButtons = document.querySelectorAll('.myBtn') //get all buttons getButtons.forEach(function(btn) { btn.addEventListener('click', function(e) { //attach eventListener e.target.parentElement.classList.toggle('myClass') //add Class }) })

 .myDiv { padding: 0.2em; margin: 0.2em; } .myClass { background: green; }

 <div class="main-div"> <div class="myDiv"> <button class="myBtn" id="myBtn1">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn2">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn3">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn4">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn5">click me</button> </div> <div class="myDiv"> <button class="myBtn" id="myBtn6">click me</button> </div> </div>

Answer 4

嘗試使用parentNode 。

 <div class="main-div">
    <div class="myDiv"> <button class="myBtn" onclick="myFunc(this.parentNode)">click me</button> </div>
    <div class="myDiv"> <button class="myBtn" onclick = "myFunc(this.parentNode)">click me</button> </div>
</div>
 
<script>
     function myFunc(DIV) {
         //Your JS code goes here.....
     }
 </script>