JS中cancelBubble=true没有效果

<body>
    <button id="btn" style="width:200px;height:200px">
            <div id="div" style="width:100px;height:100px;background:azure;"><p>Click</p></div>
    </button>
    <script type="text/javascript">
    var btn = document.getElementById('btn');
    var div = document.getElementById('div');
    function clickHandeler (e) {
        alert('hello');
    }
    function subClickHandeler (e) {
        e = e || window.event;
        if(e.stopPropagation)
            e.stopPropagation();
        else
            e.cancelBubble = true;
    }
    btn.addEventListener('click',clickHandeler,false);
    div.addEventListener('click',subClickHandeler,false);
    </script>
</body>

IE中点击div的时候还是会弹出hello，为什么？该怎么解决？

function subClickHandeler (e) {
        e = e || window.event;
        if ( e && e.preventDefault ){ 
            e.preventDefault(); 
       }else{
            e.returnValue = false; 
       }
    }

原因是html标签嵌套问题：
button元素标签里面不能嵌套div元素标签，因为div元素的父元素必须是那些子元素为段落式元素的元素。
参考 WEB标准系列－HTML元素嵌套
题主的代码我测试的结果在FF和IE中都没有效果，在Chrome，Safari，Opera中可以,说明浏览器的容错能力不一样。

把button标签改为div标签就可以了……

为了弄清楚这个答案，我凌晨两点睡的，今天又弄了一上午，也是醉了……

IE 8- 不支持以 addEventListener() 的方式来监听事件，而是采用 attachEvent()来监听事件。
一般可以借助一些库来帮助处理兼容性问题，如果自己写的话，加一个检查即可：

if (el.addEventListener) {
  el.addEventListener('click', subClickHandeler, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', subClickHandeler);
}

【热门文章】