时间戳

首页 > 解决方案 > onclick 在页面加载时触发

javascript - onclick 在页面加载时触发

问题描述

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

这是代码：

<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";
}

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

标签： javascriptwordpressfunctionwoocommerce

解决方案

您可以使用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');
}
<li class="btn-open-sidecart"><i class="fas fa-shopping-cart fa-lg"></i> icon</li>

推荐阅读