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

【问题标题】：HTML href links does not work after i added javascript to navigation component将 javascript 添加到导航组件后，HTML href 链接不起作用
【发布时间】：2017-07-06 05:01:05
【问题描述】：

我有一个用 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>

【问题讨论】：

您正在为整个文档设置一个全局点击处理程序。当单击的元素没有“数据折叠”并且其父元素也没有时，您可以防止默认值。所以，当有人点击一个链接（没有数据折叠也没有它的父级）时，preventDefault 执行取消点击。

标签： javascript html navigation href

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

event.preventDefault() 是罪魁祸首，因为当用户点击时跟随链接是链接的“默认”行为。

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

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

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

【讨论】：