如何才能使点按高亮显示仅显示在父元素上，而不是在子元素上？

Question

假设我在iOS上呈现此标记：

<a href="#" class="book">
  <span class="title">Robinson Crusoe</span>
  <span class="author">Daniel Defoe</span>
</a>

当用户点击该元素时，我希望小灰色点击突出显示仅在父链接上显示 ，而不是在他们点击的单个<span>标记上显示。

所以不要这样：

+-----------+
|###########|
|           |
+-----------+

我希望用户看到这个：

+-----------+
|###########|
|###########|
+-----------+

我尝试了这样的代码：

.book {
  -webkit-tap-highlight-color: initial;
}

.book * {
  -webkit-tap-highlight-color: none;
}

该代码将抑制子跨度上的突出显示，但它也会抑制父跨度上的突出显示，因此最后不会突出显示任何内容，这不是我想要的。

我尝试使用谷歌搜索，但似乎找不到除this之外的任何内容，这与我的问题无关。

有没有人有尝试这样做的经验？

Answer 1

最后找到了一种方法（在尝试伪类之后）：

.book {
  -webkit-tap-highlight-color: transparent;
}

.book:active {
  background-color: #efefef /* tap color */;
}

可行，因为iOS Safari会应用:active样式onTouchStart。