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

Posted 2023-02-24

【中文标题】CSS：仅将指针事件应用于文本

【英文标题】：CSS: Apply pointer-events To Text Only

【发布时间】：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 中创建子元素来捕获事件。

提前致谢！

【参考方案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;