在页面加载之前捕获点击事件，并在 DOM 准备就绪后触发

Capture click event before page load and trigger after DOM ready

本文关键字：并在 事件 DOM 准备就绪 加载      更新时间：2023-09-26

我正在一个电子商务网站上工作，当用户单击"添加购物车"按钮时，在产品列表页面上产品将被添加到购物车，我们显示一个弹出框，说产品已添加...我们正在使用插件来显示弹出框，弹出窗口的数据来自 ajax 和 java 控制器。当整个页面成功加载时，它运行良好。如果用户在页面加载时单击"添加购物车"，则显示纯 ajax 结果而不是弹出窗口，因为用于弹出窗口的插件在页面加载期间不可用。我们尝试禁用添加购物车按钮直到页面加载，但客户对这种方法不满意。

法典：

<--!form for add to cart-->
 <form submit="addcart()">
  <input type="button">Add Cart</button>
 </form>
 //JS for show popup and save form data
 saveform:function{
 }
 displayPopup:function{
 }
 productadd:function{
   saveform();
   displayPopup();
 }
$(document).ready(function(){
   productadd();
 }

是否有任何解决方法可以在页面加载期间捕获单击事件，并在用户已单击时自动触发特定按钮的单击事件。请向我建议任何其他解决方案以正确显示弹出窗口。

提前致谢：）

您的选择是不使用内联 JS，现在无论如何都不建议这样做。在这种情况下，您可能会在尚未下载和分析 JS 文件时调用 addcart() 函数。

解决方案是在 DOM 准备就绪时使用 JS 将点击事件绑定到提交表单，这样点击事件只有在加载 JS 后才有意义。对于您的 HTML，请删除内联 JS：

<form>
    <input type="button">Add Cart</button>
</form>

相反，使用 JS 侦听提交事件：

$(document).ready(function(){
    productadd();
    $('form').submit(function() {
        addcart();
    });
});

此外，您可能想查看您的网站加载速度如此缓慢的原因（或至少是 JS）。您是否将其作为 gzip 文件提供？有没有办法最小化它（只有生产版本）？

相关文章：