onclick 在页面加载时触发

【问题标题】：onclick triggering on page loadonclick 在页面加载时触发
【发布时间】：2021-10-19 01:29:04
【问题描述】：

我在菜单中有一个图标，点击它会触发显示侧面板的功能，但它也会在页面加载时触发它。

这是代码：

<li class="btn-open-sidecart" onclick="openSideCart()"><i class="fas fa-shopping-cart fa-lg"></i></li>

这是点击时触发的功能：

function openSideCart() {
    document.getElementById("mySidebar").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
}

如何防止在页面加载时触发功能？

【问题讨论】：

请点击[<>! sn-p 编辑器并提供minimal reproducible example 相关框架和插件（来自cdn）。看来您可能正在使用一些“sidecart.js”，它可能具有“加载时打开”设置作为默认设置
你是告诉我边车是那个包的一部分
您到目前为止显示的代码并不能解释为什么边车在加载时打开，如果您有 css 使其在加载时关闭

标签： javascript wordpress function woocommerce

【解决方案1】：

您可以使用addEventListener

document.addEventListener('load', () => {
  openSideCart();
});

例如，不要使用内联事件，而是使用 addEventListener 作为您的按钮：

document.querySelector('.btn-open-sidecart').addEventListener('click', () => {
  openSideCart();
})
/*
 *  document.querySelector('.btn-open-sidecart').addEventListener('click', openSideCart) short version
 */

function openSideCart(){
  console.log('trigger');
}

&lt;li class="btn-open-sidecart"&gt;&lt;i class="fas fa-shopping-cart fa-lg"&gt;&lt;/i&gt; icon&lt;/li&gt;

【讨论】：

这会超出功能范围吗？我刚刚试过这个没有运气。 load 是否指示页面加载？因为我希望它触发onclick
如果你只需要点击使用我建议的第二个代码
document.querySelector('.btn-open-sidecart').addEventListener('click', openSideCart); 甚至
和document.addEventListener('load', openSideCart);
很可能sidecart.js是一个默认打开购物车的插件