简单JS函数异常：移除alert后功能完全失效

核心原因 #

你的问题出在<a>标签的默认跳转行为上：点击带href="#"的<a>标签时，浏览器会立即触发页面跳转（回到顶部），这个动作会中断当前正在执行的JavaScript代码。

• 保留alert时，alert会阻塞浏览器的UI线程，强制等待用户确认后才处理跳转，因此reveal函数能完整执行。
• 去掉alert后，函数执行速度远快于页面跳转，浏览器还没来得及执行console.log和gb.revealClue，页面就已开始跳转，导致代码被中断。
• 断点调试时，浏览器会暂停执行流程，给足代码执行时间，因此功能正常。

解决办法（任选其一即可） #

方法1：让<a>标签的onclick接收函数返回值，阻止默认跳转

把onclick绑定到<a>标签上，让它返回reveal()的结果，利用函数里的return false阻止跳转：

<a href="#" onclick="return reveal()">
  <i class="fa fa-flash" title="Reveal the current answer"></i>
</a>

方法2：在函数内直接阻止事件默认行为

修改reveal函数，通过事件对象拦截<a>的默认跳转：

function reveal(event) {
    event.preventDefault(); // 阻止<a>的默认跳转行为
    console.log(`Revealing answer : ${gb.csrClue}`);
    gb.revealClue(gb.csrClue);
    return false;
}

同时在HTML里传递事件对象：

<a href="#"><i class="fa fa-flash" onclick="reveal(event)" title="Reveal the current answer"></i></a>

方法3：修改<a>的href属性，避免跳转

把href="#"改成href="javascript:void(0)"，直接禁用<a>的跳转行为：

<a href="javascript:void(0)">
  <i class="fa fa-flash" onclick="reveal()" title="Reveal the current answer"></i>
</a>

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