首頁猿問如何為多個 div...

如何為多個 div 的內部/外部事件“單擊”設置條件？

JavaScript

拉風的咖菲貓 2023-01-06 16:07:36

html我有js如下所示：document.addEventListener('click', myFunction())function myFunction(e) { let inputs = document.querySelectorAll('.my-element'); let m = inputs.forEach((el) => el.contains(e.target)); if (!m) { console.log('Element'); }}<div class="my-element" style: "width:100px; height: 100px"></div><div class="my-element" style: "width:100px; height: 100px"></div><div class="my-element" style: "width:100px; height: 100px"></div>問題是，即使我在目標內部單擊，條件仍然有效。我需要條件僅在我單擊元素外部時才有效。我的錯誤是什么？

查看完整描述

3 回答

慕森王

TA貢獻1777條經驗獲得超3個贊

如果您希望單擊事件僅在不超過某些元素時觸發，您必須檢查事件目標是否與那些元素不同

除了將 m 的值設置為始終返回未定義的 forEach，然后檢查 !m 這將始終為真之外，您幾乎擁有它

只需從節點列表中創建一個新數組并將 m 設置為 .find 值，這樣一來

document.addEventListener('click', myFunction)

function myFunction(e) {

let inputs = document.querySelectorAll('.my-element');

let titles = document.querySelectorAll('.my-title');

let m = Array.apply(0,inputs).find((el) => el.contains(e.target));

if (!m) {

console.log('Element');

}

反對回復 2023-01-06

森林海

TA貢獻2011條經驗獲得超2個贊

這里：

因為inputs是節點列表，所以需要將其轉換為數組。

我在這里用傳播運算符完成了我...

你也可以這樣做Array.from，[].concat(inputs)

然后為您過濾數組e.target并檢查長度是否為 0。

document.addEventListener('click', myFunction)

function myFunction(e) {

let inputs = document.querySelectorAll('.my-element');

let m = [...inputs].filter(el => el === e.target);

if (!m.length) {

console.log('Element');

}

</div>

</div>

</div>

反對回復 2023-01-06

青春有我

TA貢獻1784條經驗獲得超8個贊

()從剛剛使用myFunction中刪除。document.addEventListener('click', myFunction())document.addEventListener('click', myFunction)

您可以使用Element.matches()with targetase.target.matches('.my-element')并驗證它是否是您想要的。matches將selector作為parameter.

在下面的示例中嘗試，當您單擊label或input它什么也不會log。當您單擊其他部分時，div它會log。

document.addEventListener('click', myFunction);

function myFunction(e) {

//let inputs = document.querySelectorAll('.my-element');

//let titles = document.querySelectorAll('.my-title');

//let m = inputs.forEach((el) => el.contains(e.target));

if (e.target.matches('.my-element')) {

console.log('Element', e.target.innerText);

}

</div>

</div>

<div class="my-element" style: "width:100px; height: 100px">c

</div>

反對回復 2023-01-06

3 回答
0 關注
235 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

如何為多個 div 的內部/外部事件“單擊”設置條件？

如何為多個 div 的內部/外部事件“單擊”設置條件？

3 回答

添加回答

如何為多個 div 的內部/外部事件“單擊”設置條件？