磨床 东莞网站建设网站seo优化分析

前言

在前端开发中，我们常常会遇到需要检测用户是否点击了某个元素外部的场景，比如弹出框在用户点击外部时需要关闭。接下来我们来封装一个 clickOutside 自定义指令

代码解析 Vue3

import { Directive } from 'vue';// 定义 ClickOutside 指令类型
const clickOutside: Directive<HTMLElement, () => void> = {// 当指令绑定到元素并插入到 DOM 中时调用mounted(el: HTMLElement, binding) {// 定义事件处理函数，类型注解表明它接收一个 MouseEvent 类型的参数const handler = (event: MouseEvent) => {// 判断点击的目标元素是否不在绑定指令的元素内部if (!el.contains(event.target as Node)) {// 调用绑定指令时传入的回调函数binding.value();}};// 给 document 添加 click 事件监听器document.addEventListener('click', handler);// 将事件处理函数存储在元素的自定义属性上，方便后续移除监听器el.__clickOutsideHandler = handler;},// 当指令所绑定的元素从 DOM 中移除时调用unmounted(el: HTMLElement) {// 移除之前添加到 document 上的 click 事件监听器document.removeEventListener('click', el.__clickOutsideHandler);// 删除元素上存储的事件处理函数属性delete el.__clickOutsideHandler;},
};export default clickOutside;

使用示例 Vue3

<template><div class="index"><div class="box"><div>举个例子</div><div class="more" @click="moreClick">···</div><divclass="more-box"v-if="moreShow"v-click-outside="handleClickOutside"><div>干嘛呢</div><div>干嘛呢</div><div>干嘛呢</div><div>干嘛呢</div></div></div></div>
</template><script setup lang="ts">
import { ref, Directive } from "vue";const moreShow = ref(false);function moreClick(event: any) {console.log("更多被戳了一下");moreShow.value = !moreShow.value;event.stopPropagation();
}function handleClickOutside() {moreShow.value = false;
}
</script><style scoped lang="scss">
.index {overflow: hidden;
}.box {width: 300px;height: 160px;border: 1px solid #00000055;border-radius: 10px;padding: 10px;margin: 100px;position: relative;
}.more {cursor: pointer;text-align: center;width: 30px;height: 30px;position: absolute;top: 10px;right: 10px;
}.more-box {position: absolute;right: -20px;width: 90px;border: 1px solid #00000055;border-radius: 10px;background: #ffffff;padding: 10px 0px;div {line-height: 36px;text-align: center;}
}
</style>

vue2 写法

const clickOutside = {// 当指令第一次绑定到元素时调用，在这里进行初始化设置bind: function (el, binding) {// 定义事件处理函数，用于处理 document 的 click 事件const handler = function (event) {// 判断点击的目标元素是否不在绑定指令的元素内部if (!el.contains(event.target)) {// 调用绑定指令时传入的回调函数binding.value();}};// 给 document 添加 click 事件监听器document.addEventListener('click', handler);// 将事件处理函数存储在元素的自定义属性上，方便后续移除监听器el.__clickOutsideHandler = handler;},// 当指令与元素解绑时调用，在这里进行清理工作unbind: function (el) {// 移除之前添加到 document 上的 click 事件监听器document.removeEventListener('click', el.__clickOutsideHandler);// 删除元素上存储的事件处理函数属性delete el.__clickOutsideHandler;}
};export default clickOutside;