jQuery/Vue实现的点击div区域外隐藏div区域，冒泡，事件捕获，移入div1,显示div2,移除div1或2，隐藏div2

最新推荐文章于 2022-08-03 18:34:23 发布

Gabriel_wei

最新推荐文章于 2022-08-03 18:34:23 发布

阅读量485

点赞数

分类专栏：前端 UI css

本文链接：https://blog.csdn.net/Gabriel_wei/article/details/104337008

版权

前端同时被 3 个专栏收录

183 篇文章 7 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

`重要`

建议使用css实现

灵感详情：https://www.runoob.com/css/css-tooltip.html

/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

我的代码实现

html代码结构

<div class="header-nav-item" data-num="skillTrain" id="skillTrain">
	技能培训
	<div class="header-second-con">
		<div class="header-nav-second">农技培训</div>
		<div class="header-nav-second">农技培训</div>
	</div>
</div>

css

.header-nav-item {
	flex: 1;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	position: relative;
	text-align: center;
}

.header-nav-item:hover {
	color: #fff;
	background-color: #2772f3;
}

.header-nav-item:hover  .header-second-con{
	visibility: visible;
}
.header-second-con {
	position: absolute;
	top: 49px;
	width: 80%;
	/* background: #f00; */
	opacity: 0.9;
	color: #fff;
	font-size: 15px;
	z-index: 3;
	padding: 1px 10%;
	visibility: hidden;
}

主要是这段

.header-nav-item:hover  .header-second-con{
	visibility: visible;
}

效果

在这里插入图片描述

如果是大的里面包裹小的

vue实现

利用v-if来实现

<div
  class="header-nav-item"
  data-num="6"
  @mouseenter="navFirst"
  @mouseleave="navReset"
>
  技能培训
  <div class="header-second-con" v-if="num == 6">
    <div class="header-nav-second">
      农技培训
    </div>
    <div class="header-nav-second">
      农技培训
    </div>
  </div>
</div>

navFirst(e) {
  this.num = e.target.dataset.num;
},
navReset() {
  this.num = 0;
}

jQuery实现的点击div区域外隐藏div区域

html

<div class="layui-col-xs6">
   <div class="header-second-btn">
       <div class="header-second-show"  id="header-second-show">
           家长版
           <i class="layui-icon layui-icon-down"></i>
       </div>
       <div class="header-second-option">
           <div>家长版</div>
           <div>老师版</div>
       </div>
   </div>
</div>

$(".header-second-show").click(function (e) {
    $(".header-second-option").show()
    console.log("123");
})
$('html').click(function (e) {
    console.log(e);
    console.log(e.target.id);
    if (e.target.id != 'header-second-show')
    $(".header-second-option").hide();
})

jq阻止事件冒泡和默认行为的方法

$("#btn").click(function(event){

    event.stopPropagation(); //1.停止事件冒泡，但是不会阻止默认行为

    return false; // 2.阻止事件冒泡，也阻止了默认行为

    event.preventDefault(); // 3.阻止默认行为，不阻止事件冒泡

});

部分知识补充

图参考：https://www.iteye.com/blog/weistar-2186657
在这里插入图片描述
引用自：https://www.php.cn/js-tutorial-5433.html
实验部分

打开在线编辑器：http://jsbin.com/goqede/edit?html,css,js,output

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>event</title>
</head>
<body>
	<div id='outer'>
		<span>outer</span>
		<div id='middle'>
			<span>middle</span>
			<div id='inner'>
				<span>inner</span>
			</div>
		</div>
	</div>
</body>
</html>

#outer{
  text-align: center;
  width: 400px;
  height: 400px;
  background-color: #ccc;
  margin: 0 auto;
}
#middle{
  width: 250px;
  height: 250px;
  background-color: #f00;
  margin: 0 auto;
}
#inner{
  width: 100px;
  height: 100px;
  background-color: #0f0;
  margin: 0 auto;
}

function $(element){
  return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
  if(addEventListener){
      $(element).addEventListener(event_name,handler,use_capture);
    }
  else{
    $(element).attachEvent('on'+event_name,handler);
  }
}

on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);

on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);



function o_click_c(){
	console.log("outer_捕获");
	alert("outer_捕获");
}
function m_click_c(){
	console.log("middle_捕获");
	alert("middle_捕获");
}
function i_click_c(){
	console.log("inner_捕获");
	alert("inner_捕获");
}
function o_click_b(){
	console.log("outer_冒泡");
	alert("outer_冒泡");
}
function m_click_b(){
	console.log("middle_冒泡");
	alert("middle_冒泡");
}
function i_click_b(){
	console.log("inner_冒泡");
	alert("inner_冒泡");
}