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

Question

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

我基于这支笔的导航：https://codepen.io/anon/pen/YQjzzq

(function() {
// Definition of caller element
var getTriggerElement = function(el) {
var isCollapse = el.getAttribute('data-collapse');
if (isCollapse !== null) {
return el;
} else {
var isParentCollapse = el.parentNode.getAttribute('data-collapse');
return (isParentCollapse !== null) ? el.parentNode : undefined;
}
};
// A handler for click on toggle button
var collapseClickHandler = function(event) {
var triggerEl = getTriggerElement(event.target);
// If trigger element does not exist
if (triggerEl === undefined) {
event.preventDefault();
return false;
}
// If the target element exists
var targetEl = document.querySelector(triggerEl.getAttribute('data-target'));
if (targetEl) {
triggerEl.classList.toggle('-active');
targetEl.classList.toggle('-on');
}
};
// Delegated event
document.addEventListener('click', collapseClickHandler, false);
})(document, window);

<nav role="navigation" id="navigation" class="list">
<a href="http://sitename.se/site/index.html" class="item -link">Hem</a>
<a href="http://sitename.se/site/vart-boende.html" class="item -link">Vårt Boende</a>
<a href="http://sitename.se/site/om-vald.html" class="item -link">Om Kvinnovåld</a>
<a href="http://sitename.se/site/lankar.html" class="item -link">Länkar</a>
<a href="http://sitename.se/site/engagera-dig.html" class="item -link">Engagera Dig</a>
<a href="http://sitename.se/site/english.html" class="item -link">English</a>
<a href="http://sitename.se/site/kontakt.html" class="item -link">Kontakt</a>
</nav>
<!-- Button to toggle the display menu  -->
<button data-collapse data-target="#navigation" class="toggle">
<!-- Hamburger icon -->
<span class="icon"></span>
</button>

Answer 1

目前，这些链接不起作用，因为它们的默认行为在 JavaScript 的第 19 行被阻止。如果我正确理解了这种情况，您只希望事件侦听器应用于可折叠菜单，因此我建议将代码更改为如下所示的内容：

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

Answer 2

event.preventDefault() 是罪魁祸首，因为当用户单击时跟踪链接是链接的"默认"行为。

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

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

您可能希望确保单击的元素是您所认为的，然后才阻止Default()。