点击空白区域关闭div

点击空白区域关闭div

我们都知道input元素的focus和blur事件，但是有的时候对于非表单元素比如div，p标签该如何实现类似点击旁边空白区就可以触发的事件呢？我们就以点击div旁边的空白区域，该div隐藏为例。

代码

// 点击空白区域关闭时间选择器
$(document).click(function(e) {
  	// 设置目标区域
    var _ele = $('#ele');   
    if (!_ele.is(e.target) && _ele.has(e.target).length === 0) {
    	//点击空白区域触发的事件：隐藏
        _ele.hide();
    }else{
    	//点击该元素触发的事件：不隐藏
        _ele.show();
    }
});

效果

点击除时间选择器以外的空白区域，比如红框处都可以对时间选择列表进行隐藏。