将javascript添加到导航组件后，HTML href链接不起作用

我用html和css创建了一个简单的主导航菜单。当我添加一些javascript来处理移动菜单按钮的折叠和切换时，页面上的每个链接都停止工作

我基于此笔的导航：

（函数（）{
//调用方元素的定义
var getTriggerElement=函数（el）{
var isCollapse=el.getAttribute（'data-collapse'）；
如果（isCollapse！==null）{
返回el；
}否则{
var isParentCollapse=el.parentNode.getAttribute（'data-collapse'）；
return（isParentCollapse！==null）？el.parentNode:未定义；
}
};
//单击切换按钮的处理程序
var collapseClickHandler=函数（事件）{
var triggerEl=gettriggerement（event.target）；
//如果触发器元素不存在
if（triggerEl==未定义）{
event.preventDefault（）；
返回false；
}
//如果目标元素存在
var targetEl=document.querySelector（triggerEl.getAttribute（'data-target'）；
if（targetEl）{
triggerEl.classList.toggle（'-active'）；
toggle（'-on'）；
}
};
//委托事件
document.addEventListener（'click'，collapseClickHandler，false）；
})（文件，窗口）
目前，这些链接不起作用，因为JavaScript第19行阻止了它们的默认行为。如果我正确理解了这种情况，那么您只希望事件侦听器应用于可折叠菜单，因此我建议将代码更改为如下内容：

 // Delegated event
document.getElementsByClassName('toggle')[0].addEventListener('click', collapseClickHandler, false);

event.preventDefault（）是罪魁祸首，因为当用户单击时跟踪链接是链接的“默认”行为

在任何网页上尝试此操作，然后尝试单击链接：

const f = e => e.preventDefault()
document.addEventListener('click', f, false)

您可能希望确保单击的元素是您认为的元素，然后且仅在之后preventDefault（）。
您正在对整个文档设置全局单击处理程序。如果单击的元素没有“数据折叠”，其父元素也没有“数据折叠”，则可以使用默认值。因此，当有人单击一个链接时（没有数据折叠，其父链接也没有数据折叠），preventDefault将执行取消单击的操作。