点击容器内的元素会响应事件（显示某个元素著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】），点击容器外则响应另外一个事件（隐藏某本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。个元素），那么如何断定点击的某个元素为容【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。器外元素呢？这个问题看上去好简单，实际上【本文受版权保护】【原创不易，请尊重版权】很难。

例如我们有下面的一串html代码：【转载请注明来源】

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

上面的代码中，我们点击#child则显示【版权所有】唐霜 www.tangshuang.net【本文受版权保护】某元素，点击非#child则隐藏该元素，【本文受版权保护】著作权归作者所有，禁止商业用途转载。可是当我们如何绑定，都会遇到点击#chi【作者：唐霜】转载请注明出处：www.tangshuang.netld，会激活#root或#parent的【未经授权禁止转载】未经授权，禁止复制转载。绑定事件，而且我们常常通过直接绑定doc未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ument的点击事件来实现该功能，实际上【版权所有，侵权必究】【版权所有，侵权必究】点击#child的同时也是点击docum【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】ent，最后的结果是无论你点击#chil【未经授权禁止转载】【未经授权禁止转载】d与否，都隐藏该元素，从肉眼感觉就像什么【本文首发于唐霜的博客】【版权所有，侵权必究】也没有发生一样。那么究竟应该如何避免点击未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。#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 4753