如何在不影响其样式的情况下将事件处理程序添加到 DOM 树中的文本节点？

Question

I am trying to add event handlers to words in text nodes in DOM tree without modifying how they look . Currently I just split the words in a text node and wrap them in separate <span> tags.

It basically turn:

    <div className='parent-of-text'>
      Have a good day
    </div>

into:

    <div className='parent-of-text'>
      <span onClick={doSomething}>
        Have
      </span> 
      <span onClick={doSomething}>
        a
      </span> 
      <span onClick={doSomething}>
        good
      </span> 
      <span onClick={doSomething}>
        day
      </span>
    </div>

However, in some cases, there may be some CSS rules that dictate the style of <span> that are direct descendants of parent-of-text class:

Say:

.parent-of-text > span {
  color: red;
}

In cases like this, what can I do to avoid the effects of such CSS rules?

Answer 1

When you generate your span with JS (you didn't show us relevant code) apply inline style on those spans, this will overwrite presented CSS style for that element.

Also this has nothing to do with DOM, JS and event handlers, this is only CSS applying styles issue.

 .parent-of-text>span { color: red; }

 <div class='parent-of-text'> Have a good day </div> <div class='parent-of-text'> <span onClick={doSomething} style="color: black"> Have </span> <span onClick={doSomething}> a </span> <span onClick={doSomething} style="color: black"> good </span> <span onClick={doSomething}> day </span> </div>