背景：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 事件
