🔥17行代码, 学会UI组件库都在用的"el.contains(node)"

干什么用的?

el.contains(node)用来判断一个元素是否在另一个元素内. 一般组价库中的"下拉"和"气泡对话框"用这个特性来实现"点击组件外部关闭组件"功能.

17行实现clickOutside(点击元素外部触发)

本文并不是要讲如何实现一个"气泡"组件, 而是实现一个组件中的通用功能:点击元素外部触发, 希望帮助大家能举一反三.

最终目标

// 开始监听
const cancel = clickOutside(el, e=>{
    // 点击el外部触发
});
// 取消监听
cancel();

原理

监听document的touchend和click事件.
在事件回调中判断event.target(当前触发事件的元素)是否在"目标元素"内 代码详解请看代码注释.

实现代码

代码基于ts实现, 🤖不过只要会js就能看懂.

const eventNames = ['click', 'touchend'];
export default function (el: Node, callback: (ev:Event) => void) {
    let isTouch = false;
    function handler(ev: Event): void {
        // touchend
        if (eventNames[1] === ev.type) isTouch = true;
        // 禁止移动端touchend触发后还触发click
        if (eventNames[0] === ev.type && isTouch) return;
        // 判断点击元素是否在el外
        // 由于ev.target的类型是EventTarget,
        // 而contains方法标注的参数类型是Node, 
        // 实际上EventTarget也是dom元素,
        // 所以此处使用需要类型断言, 标注为Node类型
        if (!el.contains(ev.target as Node)) callback(ev);
    }

    eventNames.forEach(name => {
        document.addEventListener(name, handler);
    });

    return () => {
        eventNames.forEach(name => {
            document.removeEventListener(name, handler);
        });
    }
}