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

Question

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

我基于这支笔的导航：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() 是罪魁祸首，因为当用户点击时跟随 links 是 link.

的 "default" 行为

在任何网页上尝试此操作，然后尝试单击 link:

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

您可能想确保单击的元素是您认为的那样，然后才 preventDefault()。

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

HTML href links does not work after i added javascript to navigation component

html

javascript

navigation

href