Javascript 自定义光标，可'；t单击DOM元素

我试着在鼠标后面画一个圆圈，也就是自定义光标。事实上，它正在按预期工作。但我有一个问题。如果在圆圈下面有一个按钮，我想在圆圈中单击按钮，但它不起作用*我可以点击元素，它工作得很好，只有当圆圈还没有在鼠标下的时候

玩了z-index和其他东西，但没有得到正确的结果，因为我想让那个圆圈在悬停元素上可见，就像下面的例子一样

window.CustomCursor=new（函数（）{
const self=这个；
常量css=`
.customCursor{
z指数：999；
宽度：22px；
高度：22px；
边框：1.2px实心#2980b9；
边界半径：50%；
位置：绝对位置；
过渡时间：200ms；
过渡定时功能：缓解；
}
`;
//创作风格
const style=document.createElement（'style'）；
appendChild（document.createTextNode（css））；
document.querySelector（'head'）.appendChild（样式）；
//创建光标
const cursor=document.createElement（'div'）；
cursor.className=“customCursor”；
document.querySelector（'body'）.appendChild（游标）；
//创造逻辑
document.addEventListener（“mousemove”，e=>{
常数{pageX，pageY}=e；
setAttribute（`style`，`top:${pageY-11}px；left:${pageX-11}px；`）；
});
document.addEventListener（“单击”，e=>{
//不久
});
});
正文{
背景#0f1215；
}
按钮
添加
指针事件：无到光标样式

const css = `
    .customCursor {
        z-index: 999;
        width: 22px;
        height: 22px;
        border: 1.2px solid #2980b9;
        border-radius: 50%;
        position: absolute;
        transition-duration: 200ms;
        transition-timing-function: ease-out;
        pointer-events: none; /* ADD_ME */
    }
`;

这么简单。我为此挣扎了3个多小时谢谢你，伙计！