Via Pexels；

“JavaScript 原生代码，点击指定元素外区域则执行相应操作，如隐藏、关闭导航、悬浮窗等。”

摘引：

DOM 节点的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。

该接口主要提供三个实例方法。

addEventListener()：绑定事件的监听函数
removeEventListener()：移除事件的监听函数
dispatchEvent()：触发事件

Via EventTarget 接口；

I. 起因及思路

本文成文缘由：“毒奶去网页广告计划” 中曾新增了一个导航页面（类hao123），随着内容分类增加，近期用起来甚觉不便，故为方便起见（无需专门点击关闭按钮），特别新增该Feature，点击空白处亦可以关闭导航页面。

以上。

本文所说的 指定元素 并非一个，而是一个集合；所以我们在代码实现里用到了 for 循环，以及一些额外的判断方法（判断是否点击到目标元素）；利用 EventTarget接口 提供的方法，绑定整个 document 下的点击事件，当且仅当事件的原始触发节点（Event.target）是（或不是）目标元素 时则执行相应操作；

II. 代码实现

（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 对象) 对象的其他方法：

III. 附注

EventTarget 接口；
Event 对象；

版权属于：毒奶

联系我们：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 许可协议，转载或引用本文时请遵守许可协议，注明出处、不得用于商业用途！