如何检测是否在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

我不相信有一种方法可以将点击事件与一个元素区别开来，并且它是一个pesduo元素-当用户单击其中一个事件时，将触发相同的事件处理程序。

但是您可以做的一件事是使用CSS禁用主机元素上的pointer-events，同时允许元素的pseduo元素上的pointer-events。这将为您提供一种“半途而废”的机制，仅用于检测对pseduo元素的点击：

pointer-events

因此，您将使用常规的

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

div:after{
  pointer-events:none;
}

处理程序，该处理程序现在仅应在单击onClick元素时触发：

::after

希望有帮助！

Answer 2

您可以在父级上设置点击处理程序，但这不会告诉您该点击是完全在“ x”按钮上。

伪元素只能用于装饰。这就是为什么您不需要为它们编写HTML并且它们完全用CSS编写的原因。

如果您有一个“ X”按钮可以执行某些操作，则最好为其添加一个按钮元素。伪元素不是为此创建的。它们也无法访问（无法具有键盘焦点）。

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

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

我也讨厌“您做错了”。但是在这种情况下，我认为进行较小的更改（希望对您而言很小）是更好的选择。