时间戳

首页 > 解决方案 > 如何检测是否在 React.js 中单击了伪元素（::after）

css - 如何检测是否在 React.js 中单击了伪元素（::after）

问题描述

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

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


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

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

    </div>
    )
  }
}

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

标签： cssreactjspseudo-element

解决方案

我不相信有一种方法可以将点击事件与元素区分开来，它是 pesduo 元素——当用户点击任何一个元素时，都会触发相同的事件处理程序。

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

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

希望有帮助！

推荐阅读