问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JS中cancelBubble=true没有效果

头像
岁月是把杀猪刀
    1.6k32335
    <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，为什么？该怎么解决？

    javascript
    阅读 4.5k
    3 个回答
    得票最新
    头像
    无名小贝勒
      5.7k156280
      ✓ 已被采纳

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

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

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

      头像
      苏生不惑
        18.9k2987139
        function subClickHandeler (e) {
        e = e || window.event;
        if ( e && e.preventDefault ){ 
            e.preventDefault(); 
       }else{
            e.returnValue = false; 
       }
    }
        头像
        MockingBird
          5.8k31433

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

          if (el.addEventListener) {
  el.addEventListener('click', subClickHandeler, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', subClickHandeler);
}
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题