contains 之 点击元素外位置隐藏元素
contains 之 点击元素外位置隐藏元素
api:
contains 检测一个元素包含在另一个元素之内 详解:http://www.runoob.com/jquery/misc-contains.html
原理:
监听click事件,当点击时判断点击位置是否包含在目标元素内,若判断通过则隐藏
代码:
// 创建click监听
mounted () {
document.addEventListener('click', this.queryHide)
},
// 清除click监听
beforeDestroy () {
document.removeEventListener('click',this.queryHide)
},
methods: {
queryHide (e) {
if ((!this.$refs.queryBox.contains(e.target)) && (!this.$refs.queryDown.contains(e.target))) {
/* 关闭元素 */
this.show = false
}
}
}
注意:
1.监听需要清除,否则控制台会报错,虽然不影响使用
2.一般判断需要判断需要关闭的元素和开启这个元素的按钮
3.ref替代了jquery和js的dom选择,当不适用vue的时候可以直接使用dom选择器完成以上操作
钻研不已,转载请注明出处。。。。。
contains 之 点击元素外位置隐藏元素的更多相关文章
- jquery选择器 选择除当前点击元素外所有的元素
问题: 多个select选择,如果已选择某些value ,该value不可再选 思路: 点击当前元素,js列出除当前元素外所有的元素 当前解决办法: function symbolDefine(ob ...
- 交换数组中两个元素的位置,元素包括key和value 一维数组
/*author: yangyu@sina.cndescription: 交换数组中两个元素的位置,元素包括key和value,具体用法见下面的例子*/$arr = array(11=>'a', ...
- 点击页面任何位置隐藏div
<include file="Public:header" /> <style type="text/css"> table{width ...
- jq实现 元素显示后 点击页面的任何位置除元素本身外 隐藏元素
$(".share-weixin").on("click",function(e){ var $wx=$(".weixin-share"), ...
- js单击显示元素,点击元素本身以外隐藏元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- jquery点击页面其他位置隐藏div
$("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('c ...
- Swift 3 点击屏幕任意位置隐藏键盘
func hideKeyboardWhenTappedAround() { let tap: UITapGestureRecognizer = UITapGestureRecognizer(targe ...
- 【css】子元素浮动到了父元素外,父元素没有随子元素自适应高度,如何解决?
正常情况 如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后 父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float ...
随机推荐
- SpringCloud之服务注册与发现Eureka(一)
Eureka是Spring Cloud Netflix微服务套件中的一部分,可以与Springboot构建的微服务很容易的整合起来.Eureka包含了服务器端和客户端组件.服务器端,也被称作是服务注册 ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
- 蓝桥杯-四阶幻方(DFS)
标题:四阶幻方 把1~16的数字填入4x4的方格中,使得行.列以及两个对角线的和都相等,满足这样的特征时称为:四阶幻方. 四阶幻方可能有很多方案.如果固定左上角为1,请计算一共有多少种方案. 比如: ...
- C++11--20分钟了解C++11 (下)
20分钟了解C++11 9 override关键字 (虚函数使用) * * 避免在派生类中意外地生成新函数 */ // C++ 03 class Dog { virtual void A(int); ...
- Flex组件参考 代码参考汇总
1:tourdeflex快速熟悉各种组件用法的参考http://www.adobe.com/devnet/flex/tourdeflex.html在线:http://www.adobe.com/dev ...
- JAVA代码模板总结
静态工厂方法+服务提供者框架模板 构造器模板 事件通知模板 单元素枚举类型singleton模块 私有构造器不可实例化类模板
- mac下面 ,启动2个桌面版appium的方法
分别打开2个终端,分别输入 appium 就可以分别起2个appium桌面版,然后设置端口 即可 参考: https://blog.csdn.net/qq_15283475/article/detai ...
- 无法将当前工程转化成model 2.5/3.1:Cannot change version of project facet Dynamic Web Module to 2.5.
Description Resource Path Location TypeCannot change version of project facet Dynamic We ...
- R语言—统计结果输出至本地文件方法总结
1.sink()在代码开始前加一行:sink(“output.txt”),就会自动把结果全部输出到工作文件夹下的output.txt文本文档.这时在R控制台的输出窗口中是看不到输出结果的.代码结束时用 ...
- IGMP Internet组管理协议 未完
一.IGMP Internet组管理协议 2.IGMP v2 3.IGMP三版本比较 4.1.1.4 IGMP v2 与 IGMP v1 的兼容 5.IGMP窃听(IGMP Snooping) IGM ...