修改CSS按钮背景色或移除边框后按钮无法点击的问题

你遇到的问题和CSS完全无关，核心坑点是你给按钮绑定的onclick用了click这个函数名——它和浏览器原生的Element.click()方法重名了，导致点击逻辑直接冲突，根本没执行你写的代码。

修复步骤： #

1. 重命名点击函数，避免和原生API冲突，比如改成handleBtnClick：
   修改后的HTML：

   <div class="row">
       <button onclick="handleBtnClick('7')" class="btn">7</button>
       <button onclick="handleBtnClick('8')" class="btn">8</button>
       <button onclick="handleBtnClick('9')" class="btn">9</button>
       <button onclick="handleBtnClick('/')" class="btn">/</button>
   </div>
   

2. 同步修改JS函数名：

   function handleBtnClick(value) {
       // 这里写你的按钮逻辑，比如打印点击值
       console.log('点击了：', value);
   }
   

3. 验证CSS效果：现在不管你改背景色还是移除边框，按钮都能正常点击。比如移除边框的CSS可以这么写：

   .btn{
       width: 60px;
       height: 60px;
       margin-left: 30px;
       margin-top: 25px;
       background: beige;
       border: none; /* 移除边框 */
       cursor: pointer; /* 加个鼠标指针，交互更直观 */
   }
   

补充说明： #

为什么会误以为是CSS的问题？因为函数冲突时按钮没触发预期动作，刚好你又改了CSS，很容易把两者关联起来，但本质是JS命名踩了原生API的坑。

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