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 相关文章推荐
js中的this关键字详解
Sep 25 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
Vue如何基于es6导入外部js文件
May 15 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
PHP实现随机生成水印图片功能
2017/03/22 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
js new Date()实例测试
2019/10/31 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python导入坐标点的具体操作
2019/05/10 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
预备党员思想汇报
2014/01/08 职场文书
中学家长会邀请函
2014/01/17 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
甘南现象心得体会
2014/09/11 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
董事长开业致辞
2015/07/29 职场文书
给学校的建议书400字
2015/09/14 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL