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

2022年05月13日 阅读数:2
这篇文章主要向大家介绍点击元素(div等)外,使元素隐藏的两种方法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

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

<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;样式,取消聚焦时的边框vue

第二种:java

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

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

<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>