jQuery简单的点击容器内元素与容器外判断

如果你不喜欢广告,请收藏我的网站,下次在网站中搜索
用真金白银赞赏有价值的内容,请通过文末二维码打赏

点击容器内的元素会响应事件(显示某个元素),点击容器外则响应另外一个事件(隐藏某个元素),那么如何断定点击的某个元素为容器外元素呢?这个问题看上去好简单,实际上很难。

例如我们有下面的一串html代码:

<div id="root">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

上面的代码中,我们点击#child则显示某元素,点击非#child则隐藏该元素,可是当我们如何绑定,都会遇到点击#child,会激活#root或#parent的绑定事件,而且我们常常通过直接绑定document的点击事件来实现该功能,实际上点击#child的同时也是点击document,最后的结果是无论你点击#child与否,都隐藏该元素,从肉眼感觉就像什么也没有发生一样。那么究竟应该如何避免点击#child时容器外事件被触发呢?如下代码即可解决。

var _itemClick = false;

$(document).on('click', function() {
  if(!_itemClick) $('#att-info').html('');
});

$('#list .item,#att-info').on('click',function() {
  _itemClick = true;
  setTimeout(function() {
    _itemClick = false;
  },100);
});

2015-08-23 4070

为价值买单,打赏一杯咖啡

本文价值40.7RMB