onclick内联JS中废弃全局event的preventDefault()替代方案

最简洁原生内联方案（推荐） #

完全不需要访问event对象，代码比原有实现更短，无废弃提示，逻辑完全一致：

<button type="submit" class="button-danger" onclick="return window.confirm('aaa')">aaa</button>

• 实现原理：内联onclick属性中，返回值为false时会自动阻止元素默认行为（对submit按钮来说就是拦截表单提交）；confirm弹窗点击确定返回true、点击取消返回false，和你原本的判断逻辑完全匹配，全程不涉及已废弃的全局event对象。

显式调用preventDefault的内联方案 #

如果你出于编码习惯一定要显式调用preventDefault，可以直接取内联事件隐式传入的局部事件对象，不要访问全局window.event：

<button type="submit" class="button-danger" onclick="if(!window.confirm('aaa')) arguments[0].preventDefault()">aaa</button>

• 实现原理：内联编写的事件逻辑会被浏览器自动包裹为标准事件处理函数，第一个入参就是符合规范的局部event对象，通过arguments[0]可以直接取到，不会触发全局变量废弃的提示。

jQuery 内联实现方案 #

如果要在逻辑中使用jQuery标准化的事件对象，可按如下方式编写，同样不需要额外封装函数：

<button type="submit" class="button-danger" onclick="const e = arguments[0]; if(!window.confirm('aaa')) $(e).preventDefault()">aaa</button>

注：该场景下jQuery方案相比原生return方案没有额外优势，优先推荐第一种原生实现，代码长度最短、兼容性最好。

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