点击空白处--某个div 消失
背景:1.需要在 easyui grid 的编辑框 获取焦点的时候,在正下方展示费用类型的网格
2.在点击费用类型网格以外的地方,该网格消失
思路:
一、用easyui 的panel 作为费用类型网格的容器
因为grid 不能显示隐藏的切换不能控制
<!--费用类型grid-->
<div class="js-costtypewrap easyui-panel" data-options="closed:true,width:400">
<table id="costtype"></table>
</div>
二、定位panel这个容器的位置
//展示费用类型
function showFeeType(el) {
var wrapTop = el.offset().top + el[0].offsetHeight;
var wrapLeft = el.offset().left - 200;
$('.js-costtypewrap').panel('open');
$('.js-costtypewrap').css({ 'position': 'absolute', 'top': wrapTop, 'left': wrapLeft }); //省略其他代码
}
三、点击文档的其他地方 让panel hide()
$(document).one('mousedown', function () {
if ($('.js-costtypewrap')[0].clientWidth) {
$('.js-costtypewrap').panel('close');
}
});
四、点击panel的时候,阻止冒泡
这样点击panel 的时候,就不会消失了
$('.js-costtypewrap').mousedown(function (event) {
event.stopPropagation();
});
如下:
敲重点
在点击easyui grid 的其他编辑框的时候,比如摘要... 费用类型的网格不能消失
原因: grid 正在编辑的输入框阻止了 click 事件的冒泡
解决方案: 使用 mousedown 事件
点击空白处--某个div 消失的更多相关文章
- popupwindow点击空白处如何自动消失?
Popupwindow如果需要点击空白处自动消失,需要设置两个函数 1.customPopWindow.setFocusable(true);该函数也可以在构造函数中设置,如:mPopupWindow ...
- 点击空白处隐藏div
class="bigPic"的div是被显示或隐藏的div,另外.case > ul > li是class="bigPic"的父级元素 $(&quo ...
- jquery 点击空白处隐藏div元素
<style type="text/css">.pop {display:none;width: 200px;height: 130px;background: #08 ...
- 使用js冒泡实现点击空白处关闭弹窗
什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
- js点击空白处触发事件
我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...
- Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)
在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...
- 怎么让一个div消失在视野里
怎么让一个div消失在视野里 视野内隐藏 1.设置高度宽度为0 div { height: 0; width: 0; } 2.设置透明度为0 div { opacity: 0; } 3.设置displ ...
- 点击其它地方DIV隐藏
$(document).bind('click',function(e){ var e = e || window.event; //浏览器兼容性 var elem = e.target || e.s ...
随机推荐
- React第一篇: 搭建React + nodejs + express框架
前提: 需要安装Node.js (>6)版本 1.cmd进到本地某个目录, 逐行输入以下指令(以下括号为注释) npm install -g create-react-app (全局安装cr ...
- 大数据-hadoop HA集群搭建
一.安装hadoop.HA及配置journalnode 实现namenode HA 实现resourcemanager HA namenode节点之间通过journalnode同步元数据 首先下载需要 ...
- 基础篇:1)时代的发展与结构设计--3d与2d设计的变迁
本章目的:机械设计需要追寻时代的脚步. 1.机械作图时代的划分 这张图是作者个人对机械作图发展的简单划分,并非哪个网站的数据.所以粗糙或错误请海涵. 2.2d作图时代 纯2d时代中,工程师开只绘制二维 ...
- django Form数据读取问题
1.在我学习django的过程中,我学习到了一个关于表单验证的问题 2.我们从前端post一个表单,通过urls配置,传给对应的view方法 3.然后再传给Form验证 4.一开始我是很好奇,在vie ...
- Mac os x的发展
OS X(前称Mac OS X)是苹果公司为麦金塔电脑开发的专属操作系统.Mac OS X于1998年首次推出,并从2002年起随麦金塔电脑发售.它是一套Unix基础的操作系统,包含两个主要的部分:核 ...
- Zookeeper选举算法原理
Zookeeper选举算法原理 Leader选举 Leader选举是保证分布式数据一致性的关键所在.当Zookeeper集群中的一台服务器出现以下两种情况之一时,需要进入Leader选举. (1) 服 ...
- day2-模块初识之路径问题
sys需要调用my_test,但是不在同一目录 会出现如下错误 具体办法:1.将my_test.py放到文件夹下 附:sys.py 和my-test.py具体代码 enumerate 重点:浅复制(用 ...
- JavaScript Ajax 实现学习
创建异步对象: function createXmlHttp(){ var xhobj=false; try{ xhobj=new ActiveXObject("Msxml2.XMLHTTP ...
- 如何下载Red Hat Enterprise Linux系统
关于如何下载Red Hat Enterprise Linux系统? 这是一个既简单,又复杂的问题.简单是因为我以为她很简单,复杂是因为下载的过程有点复杂的. 相信去Oracle官网下载过东西的同学对下 ...
- spring-boot 应用配置文件(.properties或.yml)
1.应用配置文件(.properties或.yml) .properties在配置文件中直接写: name=Isea533 server.port=8080 .yml格式的配置文件如: name: I ...