zoukankan      html  css  js  c++  java
  • JS阻止冒泡方法(转)

    S事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失。在这个过程中,如果你只希望事件发生在目标元素,而不想它传播到祖先元素上去,那么你需要在“泡泡”离开对象之前刺破它。 

      我在文档中写了一个层,<div id="need_hide">点击以外隐藏该层</div>,并为之设置了简单的样式,现在我希望点击该层以外的地方使之隐藏,那么我给根元素绑定了一个click事件,一点击html就隐藏该DIV,代码如下:

    1 document.documentElement.onclick = function() {
    2     document.getElementById('need_hide').style.display = 'none';
    3 }

    但是点击该层后,也使之隐藏了,这不是我希望得到的效果。由于该层属于根元素的子节点,所以它也被绑定了这个click事件,那么需在该元素被click时阻止冒泡事件的发生,加上以下代码:

     1 function stopPropagation(e) {
     2     e = e || window.event;
     3     if(e.stopPropagation) { //W3C阻止冒泡方法
     4         e.stopPropagation();
     5     } else {
     6         e.cancelBubble = true; //IE阻止冒泡方法
     7     }
     8 }
     9 document.getElementById('need_hide').onclick = function(e) {
    10     stopPropagation(e);
    11 }

    如果还想增加一个链接:<a href="#" id="btn_show">显示层</a>,用它来控制该层显示出来,那么仍然需要在该链接被点击时阻止冒泡事件的发生,加上以下代码:

    1 document.getElementById('btn_show').onclick = function(e) {
    2     document.getElementById('need_hide').style.display = 'block';
    3     stopPropagation(e);
    4 }
  • 相关阅读:
    sql 临时表循环更新月租金
    董事长审核租金异常处理备份
    datetable导出成Excel
    DateTable导出添加时间段
    button 美化
    JS计算两日期之间相差的月份
    刚做的JS,备份一下(空代表格计算)
    Windows 框架基础开发流程
    照片切换
    Sql datetime类型数据默认1900
  • 原文地址:https://www.cnblogs.com/xingmeng/p/3830879.html
Copyright © 2011-2022 走看看