JavaScript 防止事件冒泡

在我们书写一个弹窗的时候，我们往往需要点击弹窗的其他地方来隐藏弹窗。

通常我们会写成：

  $(document).bind('click',function(){
     $('.pop-box').hide();
  });

“然并卵” , 这个时候我们就需要防止事件冒泡。

jQuery 里面提供了 return false; 和 event.stopPropagation(); 来防止冒泡。

通常我们会将 return false; 用在 form 表单提交验证上。

event.stopPropagation(); 来防止 点击事件 冒泡。

然而，我需要的功能需求是：

需求1:

1. 点击某个按钮 出现弹窗；
2. 点击弹窗周围， 弹窗隐藏（点击弹窗， 弹窗不隐藏）；
3. 点击弹窗上的 X ， 弹窗隐藏。

方法1: 利用遮罩层来，控制点击区域。

添加一个 cover 层，点击 cover 层的时候 隐藏弹层。

html

  <div class="cover"></div>
  <div class="pop-box"><span class="x-btn">X</span></div>
  <button class="pop-btn">POP</button>

css

  .cover {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9998;
  }
  .pop-box {
     position: absolute;
     width: 400px;
     height: 400px;
     margin-left: 20px;
     margin-top: 20px;
     display: none;
     z-index: 9999;
  }

js

  $(function() {
     $('.pop-btn').click(function() {
        $('.pop-box, .cover').show();
     });
     $('.cover, .x-btn').click(function() {
        $('.cover, .pop-box').hide();
     });
  });

效果预览

需求2

1. 点击按钮出现 list 选择弹层，
2. 点击 list 选项后，操作选项, 隐藏弹层，
3. 点击 list 其他地方，隐藏弹层。

html

  <div class="subject-select select">
          <div class="divselect" disabled="true">
            <cite>请选择所授科目</cite>
            <ul>
              <li><a href="javascript:;" selectid="1">数学</a></li>
              <li><a href="javascript:;" selectid="2">英语</a></li>
              <li><a href="javascript:;" selectid="3">物理</a></li>
              <li><a href="javascript:;" selectid="4">化学</a></li>
              <li><a href="javascript:;" selectid="5">生物</a></li>
              <li><a href="javascript:;" selectid="6">历史</a></li>
              <li><a href="javascript:;" selectid="7">地理</a></li>
              <li><a href="javascript:;" selectid="8">政治</a></li>
              <li><a href="javascript:;" selectid="9">语文</a></li>
              <li><a href="javascript:;" selectid="10">其他</a></li>
            </ul>
          </div>
          <input name="subject" type="hidden" value="" class="inputselect" />
        </div>
      </div>

css

  .divselect {
  width: 240px;
  height: 40px;
  z-index: 9900;
}
.divselect ul,
.divselect li {
  margin: 0;
  padding: 0;
  font-size: 13px;
  list-style: none;
}

.divselect cite {
  width: 206px;
  height: 40px;
  line-height: 40px;
  display: block;
  font-size: 14px;
  cursor: pointer;
  font-style: normal;
  padding-left: 4px;
  padding-right: 30px;
  border: 1px solid #cccccc;
  background: url(../image/xjt.png) no-repeat right center;
}

.divselect ul {
  width: 240px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  position: absolute;
  z-index: 20000;
  margin-top: -1px;
  display: none;
}

.divselect ul li {
  height: 24px;
  line-height: 24px;
}

.divselect ul li a {
  display: block;
  height: 24px;
  color: #333333;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
}

.divselect ul li a:hover {
  background-color: #CCC;
}

js

  (function($) {
  $.extend($.fn, {
    divselect: function(divSelect, inputSelect, callback) {
      var $that = $(this);
      $that.find('cite').click(function(event) {
        $that = $(this).parents('.select');
        var ul = $that.find('ul');
        if (ul.css('display') === 'none') {
          ul.slideDown('fast');
        } else {
          ul.slideUp('fast');
        }
        event.stopPropagation();
      });
      $that.find('ul li a').click(function(event) {
        var txt = $(this).text();
        $that.find('cite').html(txt);
        var value = $(this).attr('selectid');
        $that.find('.' + inputSelect).val(value);
        $that.find('ul').hide();
      });
      $(document).click(function(event){
        $that.find('ul').hide();
        event.stopPropagation();
      });
    }
  });
 }(jQuery));

$(function() {
    $('.select').divselect('divselect', 'inputselect', function(){});
  });

效果预览