單擊事件不適用於內部標簽元素

Question

這是我正在使用的標記

<div class="checkout-row__form-column__billing">
  <div class="checkout-row__form-column__billing__title billing-collapse collapse-btn">
     <div class="checkout-row__form-column__billing__title__arrow">
       <i class="fa fa-chevron-right" aria-hidden="true"></i>
     </div>
   <h2>1. Billing Details</h2>
</div>
<div class="checkout-row__form-column__shipping__content shipping-collapse-content collapse-target"></div>
<div class="checkout-row__form-column__shipping">
  <div class="checkout-row__form-column__shipping__title shipping-collapse collapse-btn">
     <div class="checkout-row__form-column__shipping__title__arrow">
       <i class="fa fa-chevron-right" aria-hidden="true"></i>
     </div>
   <h2>2. Shipping Details</h2>
</div>
<div class="checkout-row__form-column__shipping__content shipping-collapse-content collapse-target"></div>

所有這些標記都包含在帶有checkout-row__form-column類的div 。 所以，我抓住了父包裝器，點擊我將目標與.collapse-btn匹配。 然后我在.collapse-target的兄弟上做類切換。 除了我無法解決的問題外，效果很好。 如果我單擊內部元素，則不會發生該事件。

這是我的js

parent = document.querySelector('.checkout-row__form-column');
    parent.addEventListener('click', (e)=>{
      if (e.target.matches('.collapse-btn')) {
        e.stopPropagation();
        
        e.target.nextElementSibling.classList.toggle('hide');
      }
    });

使用這些代碼，如果我不單擊i元素或h2我就可以切換類。 如果單擊e.target內的任意位置，我該如何編寫 JavaScript 將觸發該事件。

非常感謝同志們的任何幫助。

Answer 1

您的代碼僅檢查event.target是否為.collapse-btn元素。 您還需要檢查被點擊的元素是否是.collapse-btn元素的后代元素。

為了達到預期的結果，您可以使用這兩個條件來檢查event.target是否是.collapse-btn或其任何后代。 要檢查后代元素，請使用通用選擇器* 。

parent.addEventListener('click', (e) => {
  if (
       e.target.matches('.collapse-btn') || 
       e.target.matches('.collapse-btn *')
  ) {
     // code
  }
});

演示

以下代碼段顯示了一個示例：

 const parent = document.querySelector('.container'); parent.addEventListener('click', e => { if ( e.target.matches('.collapse-btn') || e.target.matches('.collapse-btn *') ) { parent.classList.toggle('active'); } });

 .container { background: #eee; width: 120px; height: 120px; } .container.active { border: 2px solid; } .collapse-btn { background: #999; padding: 10px; } .collapse-btn span { background: #fc3; font-size: 1.3rem; cursor: pointer; }

 <div class="container"> <div class="collapse-btn"> <span>Click</span> </div> </div>

您也可以將選擇器放在一個數組中，然后使用.some()方法檢查event.target與數組中的任何一個選擇器匹配。

const selectors = ['.collapse-btn', '.collapse-btn *'];

parent.addEventListener('click', e => {
  if (selectors.some(s => e.target.matches(s))) {
    // code
  }
});

演示

以下代碼段顯示了一個示例：

 const parent = document.querySelector('.container'); parent.addEventListener('click', e => { const selectors = ['.collapse-btn', '.collapse-btn *']; if (selectors.some(s => e.target.matches(s))) { parent.classList.toggle('active'); } });

 .container { background: #eee; width: 120px; height: 120px; } .container.active { border: 2px solid; } .collapse-btn { background: #999; padding: 10px; } .collapse-btn span { background: #fc3; font-size: 1.3rem; cursor: pointer; }

 <div class="container"> <div class="collapse-btn"> <span>Click</span> </div> </div>

替代方案

代替使用的.matches()方法中，使用的組合Element.closest()和Node.contains()方法，以檢查event.target是.collapse-btn元件或是的子元素.collapse-btn元素。

為此，您需要執行兩個步驟：

1. 您首先需要獲取與event.target最接近的祖先.collapse-btn 。

2. 之后，您需要檢查event.target是否是步驟 1 中選擇的按鈕的后代。

代碼：

parent.addEventListener('click', (e) => {
   const targetCollapseBtn = e.target.closest('.collapse-btn');

   if (targetCollapseBtn && targetCollapseBtn.contains(e.target)) {
       ...
   }
});

如果event.target是.collapse-btn本身，那么

e.target.closest('.collpase-btn')

將返回e.target ，即.collapse-btn和

targetCollapseBtn.contains(e.target)

也將返回 true，因為.contains()方法返回 true，即使作為參數傳遞給它的節點與調用.contains()方法的節點相同。

因此，以這種方式使用.closest()和.contains()方法涵蓋了兩種用例，即單擊.collapse-btn或單擊其任何后代元素時。

演示

以下代碼段顯示了一個簡單的示例：

 const parent = document.querySelector('.container'); parent.addEventListener('click', e => { const targetCollapseBtn = e.target.closest('.collapse-btn'); if (targetCollapseBtn && targetCollapseBtn.contains(e.target)) { parent.classList.toggle('active'); } });

 .container { background: #eee; width: 120px; height: 120px; } .container.active { border: 2px solid; } .collapse-btn { background: #999; padding: 10px; } .collapse-btn span { background: #fc3; font-size: 1.3rem; cursor: pointer; }

 <div class="container"> <div class="collapse-btn"> <span>Click</span> </div> </div>