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

最新推荐文章于 2023-07-12 10:16:45 发布
最新推荐文章于 2023-07-12 10:16:45 发布
阅读量462 收藏
点赞数
分类专栏： 前端 UI css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gabriel_wei/article/details/104337008
版权
前端 同时被 3 个专栏收录
183 篇文章 6 订阅
订阅专栏
UI
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>

js

$(".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_冒泡");
}

在这里插入图片描述

当我们点击inner的时候结果是：
在这里插入图片描述

Gabriel_wei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html消失触发事件,三种方法教你HTML实现点击某一个元素之外触发事件
weixin_29913535的博客
06-03 598
大致编写的HTML界面渲染后是这个样子的，我们现在想要实现的需求是点击Button所在的div不会触发事件，而在点击Button所在的div之外的区域时会触发事件，下面就来介绍三种方法实现。Button/* CSS代码 */.container{width: 400px;height: 400px;display: flex;align-items: center;justify-content:...
vue 点击其他区域关闭自定义div操作
10-15
主要介绍了vue 点击其他区域关闭自定义div操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery实现点击指定div外区域隐藏该div
04-18
jquery实现点击指定div外区域隐藏该div
Jquery点击div之外的地方隐藏当前div
weixin_30632089的博客
12-24 104
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> ...
js实现的点击div区域外隐藏div区域
孤城幻夜
04-24 1099
首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。 阻止冒泡：1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true，对于IE浏览器， 而Jquery已经有兼容浏览器的方法，event.stopImmediatePropa
jQuery学习——clickoutside应用
u013237862的博客
11-11 2216
自定义clickoutside事件，使得点击绑定元素之外的位置可以执行handler。这个方法可以用event.special来实现，方法如下   (function($){ var elems = $([]); $.event.special.clickoutside = { setup: function(){ var elem = $(this);
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
zhouzuoluo的博客
05-26 4208
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流，这两种事件流分别是捕获和冒泡。 和许多Web技 术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的 是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。 默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Fir...
走进Vue2飞入Vue3
最新发布
分享思想，留下痕迹。
07-12 1696
✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏： Vue ✨特色专栏： MySQL学习 🥭本文内容：走进Vue2飞入Vue3 🖥️个人小站 ：个人博客，欢迎大家访问 📚个人知识库： 知识库，欢迎大家访问Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项
Vue基础
weixin_45203607的博客
09-13 1244
Vue基础 创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ }) 在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括： - el - data - methods - computed - beforeCreate() - created () - watch 等等 还有就是可以通过Vue实例对象调用 对象内的数据 下面会有演示 el 绑定模板 每个Vue实例都需要关联一段Html模板，Vue会基于
1、Vue 笔记（初识 Vue 、Vue 的基本指令、事件修饰符）
qq_43625134的博客
10-09 648
文章目录什么是 Vue框架和库的区别MVC 与 MVVM 的图解关系第一个 Vue 程序el 挂载点data 数据Vue 中的 `v-text` 指令Vue 中的 `v-html` 指令Vue 中的 `v-on` 指令Vue 中的 `v-show` 指令Vue 中的 `v-if` 指令Vue 中的 `v-bind` 指令Vue 中的 `v-for` 指令Vue 中的 `v-model` 指令事件修饰符(stop、prevent、capture、self、once)Vue 指令之 `v-for` 和 `key
详解vue中点击空白处隐藏div的实现（用指令实现）
08-27
本篇文章主要介绍了详解vue中点击空白处隐藏div的实现（用指令实现），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现点击div外部触发事件的封装方法，注：基于element（学习vue的第一个月零不知道几天）
01-08
实现代码 我是里面内容 我是里面内容2 import Clickoutside from 'element-ui/src/utils/clickoutside' export default { directives: { Clickoutside }, methods: { clickOut() { console.log('点击...
Vue切换div显示隐藏,多选，单选代码解析
12-28
切换div显示隐藏 1）单个item下的部分dom结构，显示或隐藏切换，不会修改其它同级dom的显示/隐藏 template dom结构 <div class=list-item v-for=(list,index)> <p class=job-name>{{list.jobName}}</p> (index...
JS事件，你真的懂吗（捕获，冒泡）？
憧憬个人博客
01-20 153
说到js事件大家肯定都知道，那么今天讲一点大家不知道的(假设大家不知道????)。所有的js事件都会分为两个阶段捕获和冒泡。那么问题来了，我们通常看到的事件都是直接触发之后就执行了，那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的呢，这里给大家准备了一个例子addEventListener()例子之前首先给大家简单介绍一下addEventListener方法，从字面上...
在线生成css3气泡对话框，倒三角，下拉倒三角
沧笙踏歌的博客
04-12 867
https://www.jiangweishan.com/tool/sanjx/index.html http://code.ciaoca.com/style/bubble/ https://www.runoob.com/css/css-tooltip.html
收集：vue+tyscript项目
沧笙踏歌的博客
07-19 287
Ant Design vue https://vue.ant.design/docs/vue/introduce-cn/ Ant Design Pro 的 Vue 实现 码云 预览 效果图 ant-design-pro-vue ***** gihtub 官网 预览 vue-alain （用的ts） github 预览 说明 vue-element-admin https://panji...
UI:注册页
沧笙踏歌的博客
07-12 185
2 3
UI:某登录页
沧笙踏歌的博客
07-12 121
vue实现点击空白处,隐藏div
06-09
1. 在需要隐藏的 `div` 外面包一个父级元素，并且给这个父级元素添加一个点击事件。 ``` <div class="wrapper" @click="hideDiv"> <div class="content" v-show="showDiv">Hello World</div> </div> </template...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值