在前端开发中，经常会遇到需要在用户点击按钮或链接时验证用户意图的情况。其中一个最基本的实现方式是使用 confirm 对话框，并在确认后执行对应操作。
然而，有时候我们会发现使用 onClick 事件处理程序并在其中加入 confirm 对话框无法阻止默认行为（如链接的跳转），这可能会导致一些不良影响。
问题原因
这个问题的根本原因是 confirm 对话框本身的工作机制。当 confirm 对话框弹出时，JavaScript 的执行流被阻塞，直到用户关闭该对话框。但由于浏览器在等待 JavaScript 的同时也会继续执行默认行为，因此在弹出 confirm 对话框的同时，链接已经开始跳转了。
解决方案
解决这个问题有几种方式。
方案一：使用 return false
使用 return false 可以阻止默认行为的发生，例如：
<a href="https://example.com" onclick="return confirm('Are you sure?')">Link</a>在这个例子中，如果用户选择取消，则 onclick 事件返回 false，从而防止链接的跳转。
方案二：使用 event.preventDefault()
另一种方法是使用 event.preventDefault() 方法来阻止默认行为。例如：
<a href="https://example.com" onclick="if(!confirm('Are you sure?')){event.preventDefault()}">Link</a>在这个例子中，onclick 事件处理程序首先检查用户是否选择了确认选项。如果是，则一切都会按预期进行；否则，它会调用 event.preventDefault() 来停止链接的跳转。
方案三：使用 Promise
还有一种更加优雅的解决方案是使用 Promise。具体来说，我们可以使用 Promise 来等待用户是否确认，然后再执行对应的操作。示例如下：
-- -------------------- ---- -------
------- -------------------------- --- --------------- -- - -------------------------- -------------------
--------
-------- --------------------- -
------ --- ----------------- ------- -- -
-- ------------------ -
----------
- ---- -
---------- --------------------
-
---
-
---------在这个例子中，我们定义了一个 confirmAsync 函数，它返回一个 Promise。当用户确认时，Promise 将被解决，并执行相应的操作；否则，Promise 将被拒绝。然后，在 onclick 事件处理程序中，我们调用 confirmAsync 并在 Promise 被解决时执行对应的操作。
结论
无论采用哪种方法，都可以解决 onClick confirm 无法阻止默认行为的问题。但需要注意的是，在某些情况下，return false 可能会导致一些不良影响，因此最好使用 event.preventDefault() 或 Promise 来处理这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27521