如何检测是否在 React.js 中单击了伪元素 (::after)

Question

我正在尝试检测元素 ::after 伪元素上的点击事件。

我希望这样的事情是可能的：


//css
div:after{
  content:"X";
  display:block;
}

//jsx
class PsudoExample  extends Component{
  render(){
    return(
    <div onAfterClick={() => {}}>

    </div>
    )
  }
}

理想情况下，我想要一个不涉及使用 document.queryselector 或类似东西的解决方案。

Answer 1

您可以在父项上设置点击处理程序，但这不会告诉您点击恰好是在 "x" 按钮上。

伪元素仅用于装饰。这就是为什么你不需要为它们写 HTML 并且它们完全写在 CSS.

中

如果您有一个可以执行某些操作的 "X" 按钮，您最好为其添加一个按钮元素。伪元素不是为此而制作的。它们也不可访问（不能有键盘焦点）。

class PseudoExample extends React.Component {
  render () {
    return (
      <div>
        <button onClick={this.close} type="button" class="close"/>
      </div>
    )
  }

  close = () => {
    console.log('clicked')
  }
}

ReactDOM.render(<PseudoExample/>, document.querySelector('main'))

.close {
  border: none;
}

.close:after {
  content: "X";
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main/>

我也讨厌 "you are doing it wrong" 答案。但在这种情况下，我认为一个小的改变（希望它对你的情况很小）是一个更好的选择。

Answer 2

我认为没有办法将点击事件与元素和 pesduo 元素区分开来 - 当用户点击任一元素时，将触发相同的事件处理程序。

你可以做的一件事是使用 CSS 禁用宿主元素上的 pointer-events，同时允许元素的伪元素上的 pointer-events。这会给你一个 "half-way-there" 机制来检测仅对 pseduo 元素的点击：

div:after{
  content:"X";
  display:block;
  pointer-events: initial;
}

div{
  pointer-events:none;
}

然后，您将使用常规的 onClick 处理程序，它现在应该仅在单击 ::after 元素时触发：

class PseudoExample extends Component{
  render(){
    return(
    <div onClick={() => { console.log("after clicked"); }}>
    I host a pseduo elements
    </div>
    )
  }
}

希望对您有所帮助！

如何检测是否在 React.js 中单击了伪元素 (::after)

How to detect if a psudo-element (::after) was clicked in React.js

css

pseudo-element

reactjs