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');
}
}

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>

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>
添加回答
舉報