Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)


Posted in Javascript onDecember 04, 2019

1. 绑定元素

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

2. mounted生命周期

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

3. 实现思路

  • 页面挂载完后,监听全局点击事件
  • 获取当前点击的元素,根据需求获取当前元素本身的属性
  • 判断当前点击元素与要隐藏的元素是否相同
  • 当前点击元素与要隐藏的元素不相同则隐藏

4. 最终效果

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗

方法:

步骤1:给页面最外出的元素div加点击事件:@click=“popShow = false”

步骤2:给点击目标元素加点击事件:@click=“popShow = true”

备注:popShow 为控制弹窗显示与隐藏的标志。

PS:下面看下vue实现点击其他地方隐藏div

方法一:

通过监听事件

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

方法二(比较好):

给最外层的div加个点击事件 @click="userClick=false"

给点击的元素上面加上:@click.stop="userClick=!userClick"

方法三:

<template>
<!--向页面添加关闭div的事件监听-->
<div class="page" @click="hide">

<!--添加.stop防止page的点击事件触发,导致无法显示div-->
<button @click.stop="show">点击显示div</button>

<!--指定的div。添加.stop防止点击div内的元素时,整个div被关闭-->
<div @click.stop>
...
</div>

</div>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

小结:

通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播,也可以使用原生js事件的event.stopPropagation()方法。

通过向指定的div添加.stop,可以实现只有点击非该div内的元素时,才会往上冒泡至page,从而实现点击其他地方隐藏div。

要向触发显示div的按钮添加.stop,否则一点击按钮,触发show()之后传播到page,立马就会触发hide(),div就无法显示。

总结

以上所述是小编给大家介绍的Vue实现点击当前元素以外的地方隐藏当前元素,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
Vue实现图片与文字混输效果
Dec 04 #Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 #Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 #Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 #Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
JS实现的雪花飘落特效示例
Dec 03 #Javascript
You might like
Discuz 模板引擎的封装类代码
2008/07/18 PHP
如何使用php输出时间格式
2013/08/31 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
python中的字典详细介绍
2014/09/18 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
党员查摆剖析材料
2014/10/10 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
golang中的struct操作
2021/11/11 Golang
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
nginx日志格式分析和修改
2022/04/28 Servers