javascript - 使用 jQuery 在容器下单击事件

Question

在此example你会看到一个类似于苹果设备的选择器。

当您点击任何数字时，您会注意到父级而非子级捕获了点击事件。

这是因为选择器。 Parent 有一个 before 伪选择器，它在顶部创建一个新元素。

.date_subsel:before {
  content:"";
  position: absolute;
  width: 206px;
  height: 41px;
  margin-top: -2px;
  background-image: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0.25) 0%, hsla(0, 0%, 0%, 0.10) 25%, hsla(0, 0%, 0%, 0.0) 50%, hsla(0, 0%, 0%, 0.10) 75%, hsla(0, 0%, 0%, 0.25) 100%);
  border: 1px solid rgb(185, 185, 185);
  border-radius: 4px;
  -webkit-box-shadow: inset 0px 0px 8px hsla(0, 0%, 8%, 0.5), 0px 3px 5px hsl(0, 0%, 69%);
}

我该如何处理这个问题并将点击事件重定向到它的子项？

Answer 1

不确定这是否是您想要的......但只需向日期添加位置属性即可。

    .date_subsel div > div {
      margin: 0 3px 0 3px;
      -webkit-box-flex: 1;
      border: 1px solid hsl(0, 0%, 68%);
      padding: 3px 8px 3px 8px;
      background-color: transparent; /* ------------ edited */
      text-align: center;
      font-size: 20pt;
      border-radius: 3px;
      box-shadow: 0px 0px 3px hsl(0, 0%, 20%);
      position: relative; /* ---------------------- added */
    }

updated Fiddle here