如图项目需要在一个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
}
}
参考公式: