自定义光标场景下点击事件失效问题求助

你当前的问题出在给所有元素（*）强制设置了cursor: none !important，这会干扰浏览器对可交互元素的事件检测逻辑。只需要调整CSS的作用范围，同时保留自定义光标的穿透设置，就能解决问题。

修正后的代码 #

CSS

body {
    cursor: none;
}

.yellow-spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #ffeb77;
    box-shadow: 0 0 15px 5px #ffeb77;
    pointer-events: none;
    transform-origin: center;
}

JavaScript

// 缓存DOM元素，提升性能
const yellowSpot = document.querySelector(".yellow-spot");

// 让圆点中心对准鼠标位置
const moveCursor = (e) => {
    const mouseX = e.clientX - yellowSpot.offsetWidth / 2;
    const mouseY = e.clientY - yellowSpot.offsetHeight / 2;
    yellowSpot.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

window.addEventListener('mousemove', moveCursor);

document.querySelector("input[type=button]").addEventListener("click", () => {
    console.log("Button clicked");
});

HTML

<div class="yellow-spot"></div>
<input type="button" value="Click Me">

关键修改说明 #

• 缩小cursor: none的作用范围：只给body设置该属性，避免覆盖所有可交互元素的光标逻辑，同时默认光标会被全局隐藏。
• 保留pointer-events: none：确保自定义光标不会阻挡下方元素的点击事件，点击会直接穿透到目标元素。
• 优化光标定位：调整鼠标坐标计算，让黄色圆点的中心对准鼠标位置，提升交互体验。

如果需要给特定元素保留默认光标（比如表单控件），可以单独为其设置cursor属性覆盖继承的样式，例如：

input[type="text"] {
    cursor: text;
}

内容的提问来源于stack exchange，提问作者Curious Programmer