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