javascript - CSS：仅将指针事件应用于文本

Question

有没有办法使用 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 中创建一个孩子来捕获事件。

提前致谢！

Answer 1

把它放在一个<span>并应用你的CSS到它

Answer 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>

Answer 3

像这样的东西可以吗？

div {
  pointer-events: auto;
}

div p {
  pointer-events: none;
}

或选择所有喜欢的孩子

div * {
  pointer-events: none;
}

我不确定您的情况，但是像 span 标签这样的多一点 html 将有助于使事情变得更整洁。

Answer 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;
}