可以在按钮内部添加一个透明的图层,并在该图层上添加点击事件监听器。这样,用户点击按钮时实际上点击的是透明图层,但点击事件将被传递到按钮内嵌元素上。示例如下:
HTML代码:
CSS代码:
.my-button { position: relative; width: 100px; height: 30px; background-color: blue; color: white; border: none; border-radius: 5px; }
.transparent-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.button-text { position: relative; z-index: 1; }
JavaScript代码:
const button = document.querySelector('.my-button'); const transparentLayer = button.querySelector('.transparent-layer'); const buttonText = button.querySelector('.button-text');
transparentLayer.addEventListener('click', () => { // 执行按钮内嵌元素的点击事件处理函数 buttonText.click(); });
上一篇:按钮内的旋转器颜色不正确
下一篇:按钮内容不更新