首頁猿問單擊事件不適用于內部標記元素

單擊事件不適用于內部標記元素

JavaScript

qq_花開花謝_0 2023-05-11 16:05:55

這是我正在使用的標記<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>所有這些標記都包含在div一個類中checkout-row__form-column。所以，我正在抓取父包裝器，單擊我將目標與.collapse-btn. 然后我在兄弟姐妹上做班級切換.collapse-target。效果很好，除了問題，我無法通過。如果我單擊內部元素，則事件不會發生。這是我的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，如果我點擊e.target.同志們非常感謝任何幫助。

查看完整描述

1 回答

夢里花落0921

TA貢獻1772條經驗獲得超6個贊

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

為了達到預期的結果，您可以使用這兩個條件來檢查 the 是event.targetthe.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="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="collapse-btn">

? ? <span>Click</span>

? </div>

</div>

替代解決方案

不使用方法，而是使用和方法.matches()的組合來檢查是元素還是元素的子元素。Element.closest()Node.contains()event.target.collapse-btn.collapse-btn

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

您首先需要獲取 the.collapse-btn的最近祖先event.target。
之后，您需要檢查是否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="collapse-btn">

? ? <span>Click</span>

? </div>

</div>

反對回復 2023-05-11

1 回答
0 關注
152 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

單擊事件不適用于內部標記元素

單擊事件不適用于內部標記元素

1 回答

替代解決方案

添加回答