关闭弹出窗口的JavaScript事件冒泡捕获问题

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Demo:PubBox</title>
    <style>.smod_pub{background:#ccc;}</style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="sheader">
    <ul>
        <li>git</li>
        <li>javascript</li>
    </ul>
</div>
<div class="smain">
    <div class="smod_pub" id="modPub">
        <a class="sicon_close" href="#" id="modPubClose">close</a>
        <p class="smsg_normal">msg:normal</p>
        <p class="smsg_error">msg:error</p>
        <p class="smsg_warning">msg:warning</p>
    </div>
</div>
<script>
$(function(){
var $doc = $(document);
var pub = $('#modPub');
$doc.on("click",function(e){
!$(e.target).closest(pub).length && pub.hide();
});
$doc.on("click","#modPubClose",function(){
pub.hide();
})
});
</script>
</body>
</html>
$doc.on("click",function(e){
!$(e.target).closest(pub).length && pub.hide();
});
++++++++++++++++
谢谢回复，我在想用原生JavaScript如何更好实现。
请问这个问题如何用JavaScript 更好的实现？谢谢！