DOM 重叠引起的点击事件无效

在开发HTML DOM 元素上，需要留意DOM 重叠是存在两种结构。
DOM 重叠的两种结构：

• 父子 DOM 在 DOM 树 Z 轴上 进行层层重叠显示视图。
• 兄弟DOM 或者 其他不是父子孙 DOM 的 节点通过 移动 DOM 的方式进行了重叠。

针对上面的两类DOM 重叠，在解决对某一块 DOM 进行点击事件的触发时，采取的策略是完全不同。以下简单展开来说一下：

父子孙 DOM 节点的重叠：

  这一类的重叠就是我们传统上的 DOM 树 Z 轴重叠，当点击 "子节点" 时，是可以通过事件捕获或者事件冒泡，来对每一层节点注册相对应的 “捕获” 或者 “冒泡”，从而实现相对应的事件的触发。
  在点击事件上，当我们希望点击事件触发的是父节点，而不是子节点时，但点击的却是子节点，那么我们只需改变 DOM 树 Z轴的顺序就可以实现，通过 z-index: xxx；来实现，z-index 数值越大，那么对应的Z 轴层级就越靠前，从而实现点击的是最靠前的DOM 节点。

z-index: 999;

不是父子孙 DOM 节点的重叠

  这类的节点的重叠是因为我们对这些节点的位置进行了移动，比如通过：float 浮动、position：absolute/relative；transform： translate（）等方式进行了位置的移动，从而引起了重叠。这类的DOM节点重叠，是不能实现 事件的“捕获/冒泡”的关联起来的，也不能通过 z-index 的改变层级权值来改变 Z轴的顺序的。
   这类DOM节点的重叠， 要实现 事件点击 能点击到下层DOM节点而不是点击移动过来的DOM节点，那么就需要使用到 css 的事件穿透属性 pointer-events: none; 这样就能使点击事件忽略上层设置了穿透的DOM节点，从而到达下层DOM 节点

pointer-events: none;  /* 表示它将捕获不到任何点击，而只是让事件穿透到它的下面*/
/*
目前支持IE11、Firefox3.6+、Chrome、Safari4+、Opera15+、Android、IOS
*/