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(){});

  });

效果预览