实现点击页面其他地方,隐藏div(原生和VUE)
1原生方法
// html
<div id="box" style="width:110px;height:110px;background-color:red"></div>
//js------js的contains方法用来查看dom元素的包含关系,
document.addEventListener('click',(e)=>{
alert('zhixing')
var box = document.getElementById('box');
if(box.contains(e.target)){
alert('在内');
}else{
alert('在外');
}
})
2、 vue 写法
//html
<div id="box" ref="box" style="width:110px;height:110px;background-color:red"></div>
//js ----ref是vue获取DOM元素的方法,在标签上绑定ref属性,js在组件内部用this.$refs.ref的值,调用。
created(){
document.addEventListener('click',(e)=>{
console.log(this.$refs.box.contains(e.target));
if(!this.$refs.box.contains(e.target)){
this.isShowDialog = false;
}
})
}
原文:https://blog.csdn.net/cxz792116/article/details/79415544
3vue
给最外层的div加个点击事件 @click="userClick=false"
给点击的元素上面加上:@click.stop="userClick=!userClick" //vue click.stop阻止点击事件继续传播
或者给子元素js事件里
click(e)=>{
e.stopPropagation();//阻止事件冒泡
this.userClick = !this.userClick;
}
实现点击页面其他地方,隐藏div(原生和VUE)的更多相关文章
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
- jQuery 实现点击页面其他地方隐藏菜单
点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...
- 点击页面其它地方隐藏该div的两种思路
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- 点击页面其它地方隐藏该div的方法
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- 点击页面任何位置隐藏div
<include file="Public:header" /> <style type="text/css"> table{width ...
- JS如何实现点击页面其他地方隐藏菜单?
方法一: $("#a").on("click", function(e){ $("#menu").show(); $(documen ...
- jquery点击页面其他位置隐藏div
$("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('c ...
随机推荐
- Fiddler死活抓不了HTTPS包解决办法
Fiddler抓取HTTPS设置注意以下操作的前提是,手机已经能够连上Fiddler,这部分的配置过程简单就不赘述了,可参考:手机如何连接Fiddler . 如何继续配置让Fiddler抓取到HTTP ...
- [开发笔记]--把input框设置成font-size:0埋下的坑。
vue项目上开发了一个输入pin码的组件.在某些安卓机器上.用户点击键盘后会自动失去焦点自动收起键盘.经过排查,发现是css属性font-size设置成0导致的.
- 6、jeecg 笔记之 自定义excel 模板导出(一)
1.前言 jeecg 中已经自带 excel 的导出导出功能,其所使用的是 easypoi,尽管所导出的 excel 能满足大部分需求, 但总是有需要用到自定义 excel 导出模板,下文所用到的皆是 ...
- python学习笔记4-切片
# 以list为例子,对tuple的切片类似 L = ['a','b','c','d','e'] L[1:3] # ['b', 'c'] # 1.起始.末尾切片可省略 L[:3] # ['a', 'b ...
- what's the 黑盒测试
what's the 黑盒测试 黑盒测试是把测试对象看做一个黑盒子,利用黑盒测试法进行动态测试时,需要测试软件产品已经实现的功能是否符合功能设计要求,不需测试软件产品的内部结构和处理过程. 黑盒测试注 ...
- btcpool之BlockMaker
一.简介 BlockServer将StratumServer发送的solvedshare数据(块头和coinbase交易)与GbtMaker发送的rawgbt数据(其他交易)一起组装成一个块,然后通过 ...
- net Core TOptions和热更新
TOptions接口 net Core 项目有个appsettings.json文件,程序默认也是读取的这个文件,appsettings.json是一个配置文件 我们可以把appsettings.js ...
- SqlServer 字段拼接
最近入职了新公司,使用的是sql server 之前因为一直使用的都是Mysql,mysql 有专用的GROUP_CONCAT()函数,那么这个就是很方便的啦,只要对结果集进行一个Group By ...
- React项目中使用hot-react-loader
在构建react项目时,默认使用的webpack-dev-serve有热刷新功能,但是局限是修改一处会使整个页面刷新 当引入了react-hot-loader时,可以实现局部刷新,即同个页面上,某一处 ...
- nginx解决跨域
location ~* \.(eot|ttf|woff|woff2|svg)$ { add_header Access-Control-Allow-Origin *; add_header Acces ...