使用 e.preventDefault() 限制事件

Posted 2023-05-08

【中文标题】使用 e.preventDefault() 限制事件

【英文标题】：Limiting events with e.preventDefault()

【发布时间】：2014-05-27 03:58:03

【问题描述】：

强制函数 toolbarInit() 只触发一次。

有 2 个项目的类为“nav”。当我点击“菜单”链接时，我想看到两个导航都打开了。

现在，该事件运行两次（每个导航一次），因此您会看到滑动切换运行多次。所以与其打开、关闭和重新打开，我只希望它打开一次。

我使用 e.preventDefault() 不应该阻止函数多次运行吗？

见我的Codepen

html：

<nav id="people-menu" class="nav people-nav">
      <div class="wrap">
        <div class="region region-audience-links">
          <div class="block">
            <div class="content">
              <ul class="row in"><div class="split-left"><li class="first leaf menu-level-1"><a href="/alumni" title="">Alumni</a></li>
                <li class="leaf menu-level-1"><a href="/current-students" title="">Current Students</a></li>
                <li class="leaf menu-level-1"><a href="/faculty" title="">Faculty</a></li>
              </div><div class="split-right"><li class="leaf menu-level-1"><a href="/parents" title="">Parents</a></li>
              <li class="leaf menu-level-1"><a href="/prospective-students" title="">Prospective Students</a></li>
              <li class="last leaf menu-level-1"><a href="/school-counselors" title="">School Counselors</a></li>
            </div></ul>  </div>
          </div>
        </div>
      </div>
    </nav>
    <ul class="header-toolbar-triggers row">
      <li><a href="#global-menu" data-target="nav" class="menu"><span class="icon-menu"></span><span class="nodisplay">Menu</span></a></li>
    </ul>
    <nav id="global-menu" class="global-nav nav" role="navigation">
      <div class="wrap">
        <div class="in">
          <div class="region region-header">
            <div id="block-menu-menu-primary-menu" class="block block-menu">
              <div class="content">
                <ul class="menu"><li class="first leaf"><a href="/about" title="">About</a></li>
                  <li class="leaf"><a href="/admissions" title="">Admissions</a></li>
                  <li class="leaf"><a href="/financial-aid" title="">Financial Aid</a></li>
                  <li class="leaf"><a href="/academics" title="">Academics</a></li>
                  <li class="last leaf"><a href="/student-residentiallife" title="">Student &amp; Residential Life</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>

javascript/JQuery

function toolbarRespond() 
  if ($(window).innerWidth() < 795) 
    $('.nav').hide();    
  


function toolbarInit() 
  $('.header-toolbar-triggers a').on('click', function(e)     
    var toolbarTarget = $(this).attr('data-target');
    $('.'+toolbarTarget).slideToggle(500);    
    e.preventDefault();
  );



$(document).ready(function() 
  toolbarRespond();
  toolbarInit();

  window.onresize = function(event) 
    toolbarRespond();
    toolbarInit();
  
);

【参考方案1】：

preventDefault() 方法仅阻止浏览器执行事件的默认操作。在这种情况下，该操作将跟随链接到其位置。您对e.preventDefault() 的调用是浏览器无法导航到#global-menu URL 的原因。

您看到多次运行绑定功能的原因是您多次运行toolbarInit() - 从而多次绑定点击。您在准备好文档时运行它，但随后您也将其绑定为在每次调整窗口大小时运行。

在您的简单示例代码中，无需在调整窗口大小时运行toolbarInit()。如果您的实际代码更复杂，则需要将 click 绑定分离出来并在调整大小时停止调用它。