I have a header element:

<h2>&#9782; Today's Bills</h2>

I want the ☶ (&#9782) icon to have an onClick function, but without giving it a tag so it stays as on tag. My approach was this

<h2> <onClick={somfunc}> &#9782; </> Today's Bills</h2> // doesn't work

So is there a way to do so? And if not, is there a way to give this part of the tag the onClick?

I don't want to make it 2 tag-elements and write css to have them alligned as this will probably break something else. I'm relatively new so not having to do so would be better.

CodePudding user response：

that won't work, use a element (like span)

Edit: this JSX need to convert into HTML and need to bind the event to actual element.

CodePudding user response：

This can be done by CSS without inserting another element.

If you absolutely don't want to insert an extra element into the HTML then you can use a pseudo before element.

This can hold the special character and have pointer-events set to auto while the actual h element has pointer-events none set.

h2 {
  pointer-events: none;
}

h2::before {
  content: "\2636";
  pointer-events: auto;
}

<h2 onclick="alert('I have seen a click');">Today's Bills</h2>

[Tested only on Edge/Chrome so far]

However, there may be accessibility issues in that I'm not certain that every screen reader will announce that special character so the possibility of clicking it may be missed by someone using special software.