html冒泡机制

事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层

比如一个简单的代码:

<body>
<button id="btn">点击</button>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    document.onclick = function() {
        console.log('document');
    }
    btn.onclick = function(event) {
        console.log('button');
   }
</script>

我点击按钮后,同时也触发了document的事件。这不是我们想要的结果

your text

冒泡顺序

IE 6.0:

div -> body-> html -> document

其他浏览器,会冒到window

div -> body-> html -> document -> window

不触发冒泡的事件

但是并不是所有的的事件都会触发冒泡,以下事件不冒泡:blurfocusloadunload

解决办法

正常浏览器

正常浏览器使用的是stopPropagation方法,

event.stopPropagation()

IE

ie低版本的使用的是cancelBubble 属性

event.cancelBubble =true

兼容写法

if(event && event.stopPropagation)
         {
              event.stopPropagation();  //  w3c 标准
          }
          else
          {
             event.cancelBubble = true;  // ie 678  ie浏览器
  }

阻止冒泡应用

最简单的用法就是弹出对话框点击空白处隐藏。我们肯定会在document上绑定一个onclick事件,用来隐藏对话框,但是我们页面上肯定也有一个元素(比如注册按钮),用来点击弹出对话框

这时候就有问题了,我们点击注册按钮本来想弹出一个对话框,但是同时响应了document的onclick事件,直接隐藏了。所以这个时候,就要对注册按钮进行冒泡的阻止。

 login.onclick = function(event) {
        $("mask").style.display = "block";
        $("show").style.display = "block";
        document.body.style.overflow = "hidden";  // 不显示滚动条
        //取消冒泡
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();
        }
        else
        {
            event.cancelBubble = true;
        }
    }

多个点击事件统一处理

经常我们页面里有很多相同的事件,比如onclick事件,我们在写的时候,很难保证每个对象都做了阻止冒泡操作,而且代码会很乱。所以一般来说我们会把相同的事件做一个统一化处理。

event.target

这个时候就需要用到event对象的target属性,它表触发事件的对象。可惜的是ie这个又不一样。

火狐 谷歌 : event.target.id

ie 678 : event.srcElement.id

兼容性写法:

  var targetId = event.target ? event.target.id : event.srcElement.id;

修改代码

 document.onclick = function(event) {
        var event = event || window.event;

        var targetId = event.target ? event.target.id : event.srcElement.id;

        if(targetId == 'login'){
            $("mask").style.display = "block";
            $("show").style.display = "block";
            document.body.style.overflow = "hidden";  // 不显示滚动条
        }
        else if(targetId != "show")  // 不等于对话框
        {
            $("mask").style.display = "none";
            $("show").style.display = "none";
            document.body.style.overflow = "visible"; // 显示滚动条
        }
  }