Via Pexels;
“JavaScript 原生代码,点击指定元素外区域则执行相应操作,如隐藏、关闭导航、悬浮窗等。”
摘引:
DOM 节点的事件操作(监听和触发),都定义在EventTarget接口。所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest、AudioNode、AudioContext)也部署了这个接口。
该接口主要提供三个实例方法。
addEventListener()
:绑定事件的监听函数
removeEventListener()
:移除事件的监听函数
dispatchEvent()
:触发事件
Via EventTarget 接口;
起因及思路
本文成文缘由:“毒奶去网页广告计划” 中曾新增了一个导航页面(类hao123),随着内容分类增加,近期用起来甚觉不便,故为方便起见(无需专门点击关闭按钮),特别新增该Feature,点击空白处亦可以关闭导航页面。
以上。
本文所说的 指定元素 并非一个,而是一个集合;所以我们在代码实现里用到了 for
循环,以及一些额外的判断方法(判断是否点击到目标元素);利用 EventTarget接口 提供的方法,绑定整个 document 下的点击事件,当且仅当事件的原始触发节点(Event.target)是(或不是)目标元素 时则执行相应操作;
代码实现
(1)点击指定元素(元素的集合)外区域执行相应操作相应代码如下:
document.addEventListener('click', function (event) {
var target = event.target;
var target_element = document.querySelectorAll('li.li_global'); // 这里的 li.li_global 为CSS选择器,即目标元素;它可能是一个,也可以是很多个(类数组)...
var number = 0;
for (i = 0; i < target_element.length; i++) {
if (target !== target_element[i] && !target_element[i].contains(target)) { // 如果原始触发节点(Event.target)不是目标元素,且不包含目标元素则...
number += 1; // 本次点击事件中,假设指定元素有100个,我们一个都没点击到,则 number 的最终结果为 100;
} else {
number -= 1; // 如果点击到其中1个,则 number 的最终结果为 98;
}
}
if (number !== 0 & number < target_element.length) { // 判断是否点击到指定元素
console.log('已点击到指定元素..')
} else {
// 如果没点到,则执行相应操作
console.log('没点击到指定元素..')
}
});
这里用到了 document.querySelectorAll()
方法,参阅;
(2)点击指定元素(单个元素)外区域执行相应操作相应代码如下:
document.addEventListener('click', function (event) {
var target = event.target;
var target_element = document.querySelector('li.li_global'); // 这里的 li.li_global 为CSS选择器,即目标元素;它可能是一个,也可以是很多个(类数组)...
var number = 0;
if (target !== target_element && !target_element.contains(target)) { // 如果原始触发节点(Event.target)不是目标元素,且不包含目标元素则...
// 如果没点到,则执行相应操作
console.log('没点击到指定元素..')
} else {
console.log('已点击到指定元素..')
}
});
这里用到了 document.querySelector()
方法,参阅;
Document 对象属性和方法
HTML文档中可以使用以下属性和方法:针对 DOM(Document 对象) 对象的其他方法:
附注
版权属于:毒奶
联系我们:https://limbopro.com/6.html
毒奶搜索:https://limbopro.com/search.html
毒奶导航:https://limbopro.com/daohang/index.html本文链接:https://limbopro.com/archives/28421.html
本文采用 CC BY-NC-SA 4.0 许可协议,转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!