伪元素添加点击事件

如图项目需要在一个textarea中写一个按钮并触发点击事件,且不能影响外层textarea的点击事件,因此下面的css方法无法使用

外层css: pointer-events: none;

伪元素css: pointer-events: auto;

第二种方法,通过给外层加click点击事件,判断鼠标点击区域是否在伪元素区域,成立则调用伪元素的触发事件,反之则不触发

let quote // dom元素,

quote.onclick = function (e) {

      // dom 元素本身宽高

      let w = quote.clientWidth

      let h = quote.clientHeight

      // e.offsetX和e.offsetY 即鼠标点击位置
      let flag = pointInRange(w, h, e.offsetX, e.offsetY)
      console.log(flag) // true即伪元素被点击,false即父级被点击

    };

export function pointInRange(w,h,x,y) {

    // 默认右上角

    let AB = Math.sqrt(Math.pow(w-x, 2) + Math.pow(0-y,2))
// 20 即 我设置伪元素的宽高大小,而且因为AB求的是一个圆的面积区域,如果太边角测量不准

    if(AB <= 20) {

        return true

    }else {

        return false

    }

}

 

参考公式: