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

Может ли что-то подобное работать?

div {
  pointer-events: auto;
}

div p {
  pointer-events: none;
}

Или выберите всех детей, как

div * {
  pointer-events: none;
}

Я не уверен в вашей ситуации, но немного больше html, например, тега span, поможет сделать вещи немного чище.

Answer 3

Во-первых, в 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;
}

Answer 4

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