点击元素(div等)外,使元素隐藏的两种方法

拿这个考验干部

已于 2022-05-12 16:58:30 修改

阅读量4.3k

点赞数 5

文章标签： vue.js javascript 前端

于 2022-05-11 09:15:57 首次发布

本文链接：https://blog.csdn.net/m0_52948787/article/details/124702594

版权

第一种:
实现点击div元素之外隐藏div 需求
需要使用元素失焦方法,但是div没有失去焦点的方法
给div元素添加tabIndex属性:tabIndex可以设置键盘中TAB键在控件中的移动顺序,也就是焦点的顺序,控件的tabIndex设成1到32767的一个值,可以把这个控件加入到TAB序列中
tabIndex的默认值为 0,把tabIndex的值设置为 -1 那么这个控件则在TAB的序列之外了,
但是 tabIndex=‘-1’ 时 , onfocus与onblur事件仍然被启动

hidefocus=“true” 隐藏聚焦的边框

<template>
	<div hidefocus="true" tabIndex="-1" @blur="divBlur" v-show="activeId === '1'">1234</div>
</template>

<script setup>
import { ref } from "vue";
function divBlur(){
  console.log("点击div之外了");
};
</script>

注意:: 这种方法,在div打开后必须要在div中有点击操作,再点击div外才能触发 @blur事件
div样式中还需加 outline:0;样式,取消聚焦时的边框

第二种:

<div class="needHide-Container" v-if="activeTollId === '1'">1234</div>

先给元素赋值一个class类名,这个类名用来区别当前点击的元素是否为要隐藏的元素

<script setup>
import { ref,watch} from "vue";
let activeTollId = ref("")
//监听
watch(
	//监听控制div显示隐藏的变量activeTollId.value
	() => activeTollId.value,
	//如果得到的新数值不为空,说明div元素显示了,给整个页面上添加mousedown鼠标点击事件调用onbourfun
	//否则得到的新数值为空说明div元素隐藏了,那就移除调mousedown点击事件
  	(val) => val ? document.addEventListener('mousedown', onbourfun) : document.removeEventListener('mousedown', onbourfun) 
)
//定义隐藏方法,用来区别点击的是否为 要隐藏的 div元素,如果点击的不是带有needHide-Container类名的元素则惦记的为div外的元素 这时我们要隐藏div所以给activeTollId.value赋值为''
const onbourfun = (e) => {
  if (!e.path.includes(document.querySelector('.needHide-Container'))) activeTollId.value = ''
}

</script>