Question

在此example中，您会看到一个与Apple设备类似的选择器。

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

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

.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%);
}

如何处理此问题并将click事件重定向到其子项？

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

使用jquery在容器下单击事件

1 个答案: