因CSP移除HTML内联JS后，如何防止用户在外部脚本绑定点击事件前触发提交按钮？

这确实是迁移到CSP禁用内联JS时很容易碰到的坑，我给你几个改动量极小的方案，完美适配你不想大改代码的需求：

方案1：移除$(document).ready包裹，直接绑定事件 #

你的脚本已经放在</body>标签之前了，这时候页面上的所有DOM元素（包括目标按钮#submitA）其实已经加载完成，完全没必要等待document.ready事件触发。

把外部JS文件theJS.js里的代码改成这样：

$("#submitA").on("click", function (event) {
  something();
});

脚本一加载就会执行事件绑定，能极大缩短用户“提前点击”的时间窗口，几乎没有额外改动，只是去掉了$(document).ready的包裹层，成本最低。

方案2：给按钮加初始禁用状态，脚本绑定后启用 #

如果担心极端情况下还是有用户能在脚本加载完成前点击（比如网络极慢的场景），可以给按钮加个初始的disabled属性，等事件绑定完成后再解除禁用：

1. 修改按钮的HTML：

<input value="Click here" type="submit" name="submitA" id="submitA" disabled />

2. 修改外部JS代码：

$("#submitA")
  .on("click", function (event) {
    something();
  })
  .prop("disabled", false);

这个方案只需要给按钮加一个属性，再在JS里多一行解除禁用的代码，改动量也非常小，同时能彻底避免无效点击的问题，用户看到的按钮在可用前是灰色不可点击状态，体验也比较直观。

不推荐的方案：延迟页面显示 #

你提到的延迟页面显示直到document.ready完成的做法，会导致页面出现白屏或者加载卡顿的情况，严重影响用户体验，除非是极端特殊场景，否则不建议采用。

内容的提问来源于stack exchange，提问作者David Balažic