第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

單擊事件不適用于內(nèi)部標(biāo)記元素

單擊事件不適用于內(nèi)部標(biāo)記元素

qq_花開花謝_0 2023-05-11 16:05:55
這是我正在使用的標(biāo)記<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>所有這些標(biāo)記都包含在div一個(gè)類中checkout-row__form-column。所以，我正在抓取父包裝器，單擊我將目標(biāo)與.collapse-btn. 然后我在兄弟姐妹上做班級(jí)切換.collapse-target。效果很好，除了問題，我無法通過。如果我單擊內(nèi)部元素，則事件不會(huì)發(fā)生。這是我的jsparent = document.querySelector('.checkout-row__form-column');    parent.addEventListener('click', (e)=>{      if (e.target.matches('.collapse-btn')) {        e.stopPropagation();                e.target.nextElementSibling.classList.toggle('hide');      }    });使用這些代碼，如果我不單擊ielement 或 ，我就可以切換類h2。我如何編寫我的 JavaScript，如果我點(diǎn)擊e.target.同志們非常感謝任何幫助。
查看完整描述

1 回答

?
夢(mèng)里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊

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


為了達(dá)到預(yù)期的結(jié)果，您可以使用這兩個(gè)條件來檢查 the 是event.targetthe.collapse-btn還是它的任何后代。要檢查后代元素，請(qǐng)使用通用選擇器*。


parent.addEventListener('click', (e) => {

? if (

? ? ? ?e.target.matches('.collapse-btn') ||?

? ? ? ?e.target.matches('.collapse-btn *')

? ) {

? ? ?// code

? }

});

演示

以下片段顯示了一個(gè)示例：

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>

您還可以將選擇器放在一個(gè)數(shù)組中，然后使用.some()方法檢查是否event.target匹配數(shù)組中的任何一個(gè)選擇器。


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


parent.addEventListener('click', e => {

? if (selectors.some(s => e.target.matches(s))) {

? ? // code

? }

});

演示

以下片段顯示了一個(gè)示例：

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

為此，您需要執(zhí)行兩個(gè)步驟：

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

  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，因?yàn)榧词棺鳛閰?shù)傳遞給它的節(jié)點(diǎn)與調(diào)用方法的.contains()節(jié)點(diǎn)相同，方法也會(huì)返回 true 。.contains()


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


演示

以下片段顯示了一個(gè)簡(jiǎn)單的示例：

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>


查看完整回答
反對(duì) 回復(fù) 2023-05-11
  • 1 回答
  • 0 關(guān)注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)