优雅的管理目标元素外点击事件的 Hook。
读ahooks源码
前置知识：node.contains( otherNode )
| 字段 | 说明 |
|---|---|
| node | 目标元素 |
| otherNode | 目标元素是否包含此dom节点 |
JavaScript的contains方法用来查看dom元素的包含关系
- 这和dart、java的不一样。
- dart的contains用来检查数组中是否包含目标元素
简单实现
html:
<body>
<div id="box">box</div>
<div>box2</div>
</body>
js:
const box = document.getElementById("box");
/**
* @name useClickAway
* @description 管理目标元素之外的点击事件
* @param {node} target
*/
function useClickAway(target) {
document.addEventListener("click", (e) => {
console.log(e.target.contains(target));
});
}
useClickAway(box);
ahooks源码:
我的公众号：我是弟中弟
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
