js实现点击登录出现蒙版效果 事件冒泡运用

事件冒泡：当事件发生后，这个事件就要开始传播(从里到外或者从外向里)
去除事件冒泡

兼容处理： if(event && event.stopPropagation){ // w3c标准

                event.stopPropagation();

                    }else{ // IE系列 IE 678

            event.cancelBubble = true;

        }

案例分析：

<button id="btn">立即登录</button>
<div id="panel"></div>
<div id="login"></div>
<script src="js/scroll.js"></script>
<script>
    window.onload=function () {
        $("btn").onclick=function () {
            //去掉事件冒泡 不然document.onclick事件不会启动
            if(event && event.stopPropagation){
                event.stopPropagation()
            }else {
                window.event.cancelable=true;
            }
            $("panel").style.display="block";
            $("login").style.display="block";
            document.body.style.overflow="hidden";
            //页面点击时 如果点击目标id不是login 则隐藏 否则跳转百度页面
            document.onclick=function (event) {
               var e=event || window.event;
              var tagetId=e.target.id;
              if(tagetId!=login){
                  $("panel").style.display="none";
                  $("login").style.display="none";
                  document.body.style.overflow="auto";
              }else{
                  window.location.href = "http://www.baidu.com";
              }
            }
        }
    }
</script>

总结：如果不停止事件冒泡 btn的点击事件 则会跟document的点击事件冲突