点击空白处--某个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 事件