给伪元素绑定点击事件，VUE3 splitpanes绑定::after ::before点击事件 html js css

有个需求，用splitpanes做页面可以拉动改变宽度，然后想给中间伪元素的小按钮【绑定点击事件】，以达到显示隐藏某模块的效果。

搜了一圈，并没有发现比较方便的办法，伪元素不是真实存在的dom，所以没办法绑定点击事件。

并且.splitpanes__splitter是插件生成的，就只能自己通过其他思路来实现需求。

发现行不通的思路：

        通过伪元素css添加鼠标指针状态，然后在click事件【判断当前点击的dom】和【当前的指针状态】，以此来实现点击效果。

        结果行不通，原因虽然可以获取当前点击的DOM，但是无法获取当前鼠标的指针状态。

成功解决思路

        弯弯绕绕还是决定用土办法，click事件【判断当前点击的dom】，加上【判断当前点击的坐标】

代码：

const handleClick = (event) => {
    //如果不是点击splitpanes__splitter的class属性名时，不必理会直接return
  if (!event.target.classList.contains("splitpanes__splitter")) return;
  const buttonHeight = 56;  //你的伪元素高度
  
    // 判断当前点击时的坐标，是否在伪元素区间
  if (
    (event.target.offsetHeight - buttonHeight) / 2 < event.layerY &&
    event.layerY < (event.target.offsetHeight + buttonHeight) / 2
  ) {
    console.log("点击到了！")
  }
};

请注意，在此处我的伪元素的width是占满的，所以我并没有判断x坐标（width）是否在伪元素中。