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

针对CSP移除内联JS后提前点击按钮的解决方案 #

嘿，这个场景我太熟悉了——刚把内联事件移到外部JS就碰到用户提前点击的问题，给你几个低成本、改动小的方案，适配你不想大改项目结构的需求：

方案1：临时禁用按钮（改动极小） #

先给按钮加个disabled属性，确保页面加载时用户点不了，等事件绑定完成后再启用它：

• HTML修改：

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

• JS修改（theJS.js里）：

  $(document).ready(function () {
    $("#submitA").on("click", function (event) {
      something();
    }).prop('disabled', false); // 绑定完事件立刻启用按钮
  });
  

这个方案只需要加一个属性和一行JS，几乎没有改造成本，而且能彻底避免提前点击的问题。

方案2：事件委托（零HTML改动） #

利用jQuery的事件委托特性，把点击事件绑定在document上（因为document在页面加载初期就存在），不管按钮什么时候渲染完成，点击都会触发对应的处理逻辑：

• JS修改（直接替换原来的绑定代码）：

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

连$(document).ready都可以省掉——因为绑定在document上的事件委托不需要等DOM完全加载，页面一开始就能生效。这个方案完全不用改HTML，是成本最低的选择。

方案3：延迟页面显示（不推荐，仅作备选） #

如果你确实想延迟页面显示到ready执行完毕，可以通过CSS临时隐藏页面，绑定完成后再显示：

• 加一段CSS（可以放在页面头部的style标签里，符合CSP要求）：

  body { display: block; }
  body.loading { display: none; }
  

• HTML修改：

  <body class="loading">
  

• JS修改：

  $(document).ready(function () {
    $("#submitA").on("click", function (event) {
      something();
    });
    $('body').removeClass('loading'); // 绑定完成后显示页面
  });
  

不过这个方案会导致用户短暂看不到页面，体验不如前两个，除非有特殊需求，否则不建议用。

综合来看，方案2事件委托是最优解，零HTML改动，还能避免提前点击的问题；如果担心事件委托的性能（其实对于单个按钮完全没问题），方案1也是非常稳妥的选择。

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