on-click-outside.md

标题	标签
onClickOutside(点击区域外的事件)	browser,event(浏览器，事件)

添加点击元素区域之外的事件。

• 使用Document.addEventListener添加事件。
• 使用element.contains方法判断是否是该元素。

const onClickOutside = (element,callback) => {
    document.addEventListener('click',e => {
        if(!element.contains(e.target)){
            callback();
        }
    })
}

调用方式:

onClickOutside(document.querySelector('#my-element'), () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element

应用场景

以下是一个实战示例:

结果如下:

<iframe src="codes/javascript/html/on-click-outside.html"></iframe>