CSS：仅将指针事件应用于文本答案

【问题标题】：CSS: Apply pointer-events To Text OnlyCSS：仅将指针事件应用于文本
【发布时间】：2017-03-10 14:37:01
【问题描述】：

有没有办法使用 CSS 指针事件仅应用于文本，例如在一个div中？这似乎适用于 SVG，但是否还有一个仅适用于常规文本元素的属性？

这就是我想要达到的目标：

<div style="width: 500px; height: 500px">
Fire only when this text is clicked!
<p><!--Don't fire in this space--></p>
Fire here too!
</div>

我不想在父 div 中创建子元素来捕获事件。

提前致谢！

【问题讨论】：

标签： javascript html css pointer-events

【解决方案1】：

将其放入 <span> 并应用您的 css

【讨论】：

感谢您的回答，这当然是一个解决方案。但是，我想在单击文本的任何部分时捕获父 div 的事件，并且不想将每个部分分别包装在跨度中。

【解决方案2】：

.mousePointer{
  cursor: pointer;
}

<div style="width: 500px; height: 500px">
  <span style="cursor: pointer;">
    Fire only when this text is clicked!
  </span>
<p><!--Don't fire in this space--></p>
  <span style="cursor: pointer;">
    Fire Here
  </span>
</div>

Or

<div style="width: 500px; height: 500px">
  <span class="mousePointer">
    Fire only when this text is clicked!
  </span>
<p><!--Don't fire in this space--></p>
  <span class="mousePointer">
    Fire Here
  </span>
</div>

【讨论】：

【解决方案3】：

这样的东西能行吗？

div {
  pointer-events: auto;
}

div p {
  pointer-events: none;
}

或者选择所有喜欢的孩子

div * {
  pointer-events: none;
}

我不确定你的情况，但是像 span 标签这样多一点的 html 会有助于让事情变得更简洁。

【讨论】：

【解决方案4】：

首先，CSS 中没有文本节点选择器。因此，如果您不想在父 div 中添加任何子项，则必须排除所有其他子项。例如：

<div>
    No pointer events here
    <div class="other-class1"></div>
    <div class="other-class2"></div>
    <p></p>
    No pointer events here
<div>

您的选择器将类似于：

div{
    pointer-events: auto;
}
div:not(.other-class1):not(.other-class2):not(p){
    pointer-events: none;
}

【讨论】：