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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

拉風的咖菲貓 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 class="my-element" style="background: black;margin: 10px;width:100px; height: 100px">

</div>

<div class="my-element" style="background: black;margin: 10px;width:100px; height: 100px">

</div>

<div class="my-element" style="background: black;margin: 10px;width:100px; height: 100px">

</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 class="my-element" style: "width:100px; height: 100px">

  <label>abcd</label>

</div>

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

<input type='text' value='input' />

</div>

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

</div>


查看完整回答
反對 回復 2023-01-06
  • 3 回答
  • 0 關注
  • 235 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號