pexels-tyler-lastovich-1022411.jpg

Via Pexels

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

摘引:

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

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

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

Via EventTarget 接口

起因及思路

毒奶去广告计划-导航页面 - 指定元素.png

本文成文缘由:“毒奶去网页广告计划” 中曾新增了一个导航页面(类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 对象) 对象的其他方法

附注

EventTarget 接口
Event 对象

最后修改:2024 年 05 月 24 日 04 : 47 PM