如何在我的下拉脚本中使用 preventDefault？答案

【问题标题】：How to use preventDefault with my dropdown script?如何在我的下拉脚本中使用 preventDefault？
【发布时间】：2014-05-12 21:50:28
【问题描述】：

我为一个简单的下拉菜单编写了一些 javascript。但在我的下拉链接中，我使用主题标签作为 href 属性 (<a href="#") 的占位符，当点击它们时，页面会滚动回顶部。

我想用 jquery 的 .preventDefault(); 来防止这种情况发生，但我不确定我会在哪里以及如何用我的脚本来实现它。

示例：http://codepen.io/anon/pen/rwdoa（不幸的是，由于 iframe codepen 使用了 iframe，它不会将主题标签添加到 url）

// *************************************
//
//   Navigation dropdown
//   -> Expand/collapse submenus
//
// *************************************

// -------------------------------------
// Toggle .is-hidden class onclick and 
// allow only one open menu at a time
// -------------------------------------

$(document).ready(function() {
    $('.Navigation-listItem').click(function(e) {
      if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
        $(".Navigation-list--dropdown").addClass('is-hidden');
        $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
      } else {
        $(".Navigation-list--dropdown").addClass('is-hidden');         
      }          
    });
  $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
    e.stopPropagation();
  });
});

// -------------------------------------
// Anything that gets to the document
// will hide the dropdown
// -------------------------------------

$(document).click(function(){
  $(".Navigation-list--dropdown").addClass('is-hidden');
});

// -------------------------------------
// Clicks within the dropdown won't make
// it past the dropdown itself
// -------------------------------------

$(".Navigation-listItem--hasDropdown").click(function(e){
  e.stopPropagation();
});

【问题讨论】：

我在想我应该添加函数 e.preventDefault();在第 15 行和第 42 行之前（行号在代码笔上）

标签： javascript jquery html drop-down-menu

【解决方案1】：

这取决于，但一种方法是这样的

$('.Navigation-listItem').click(function(e) {
  if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
    $(".Navigation-list--dropdown").addClass('is-hidden');
    $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
  } else {
    $(".Navigation-list--dropdown").addClass('is-hidden');         
  }          
}).children('a.Navigation-link--dropdownTrigger').click(function(e){e.preventDefault();}); // add this line

demo

【讨论】：

您的方法与 Jakob Kotula 建议的方法在功能上是否存在差异？还是只是语法不同？
他的代码将 e.preventDefault(); 到 document.. 我的代码将添加到 <a> 类 Navigation-listItem 的元素下。

【解决方案2】：

你应该在你的处理程序中传递事件：

$(document).click(function(e){
  e.preventDefault();
  $(".Navigation-list--dropdown").addClass('is-hidden');
});

【讨论】：

【解决方案3】：

我不确定我是否正确，但我认为这很容易，只需将 e.preventDefault 添加到第一次点击方法即可。

$(document).ready(function() {
    $('.Navigation-listItem').click(function(e) {
      e.preventDefault();
      if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
        $(".Navigation-list--dropdown").addClass('is-hidden');
        $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
      } else {
        $(".Navigation-list--dropdown").addClass('is-hidden');         
      }          
    });
  $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
    e.stopPropagation();
  });
});

【讨论】：

我是否也应该在第 42 行之前添加它（最后一段代码，在行 e.stopPropagation(); 之前）？
这应该不是必需的，但你可以试试，你会看到:-)
我刚刚注意到，您的 .Navigation-listeItem 为 li，因此您需要按照 Reigel 的建议在子元素“a”上使用 preventDefault()。

【解决方案4】：

试试这个

    $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
        e.preventDefault();
    });

【讨论】：