jQuery下拉菜单链接无法点击问题求助

编写了如下代码，点击下拉菜单中的任意链接均无法跳转，示例代码如下：

原代码 #

JavaScript #

$(document).ready(function() {
  $('body').on('click', '.dropdown_parent', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var getId = $(this).attr("data-id");
    if (
      $('#drop_' + getId).is(":visible")) {
      $('#drop_' + getId).hide();
    } else {
      $('.dropdown_child').hide();
      $('#drop_' + getId).show();
    }
  });
});

CSS #

.dropdown_parent {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.dropdown_child {
  padding: 10px;
  z-index: 9;
  background-color: #FFF;
  min-width: 100%;
  color: #373737;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  width: 100%;
  display: none;
  position: absolute;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="dropdown_parent" data-id="111">
  <div id="down_parent">drop menu ...</div>
  <div style="left: 0px; width: 120px; display: none;" id="drop_111" class="dropdown_child text-start">
    <a href="https://www.google.com">google</a><br>
    <a href="https://www.facebook.com">facebook</a>
  </div>
</div>

原因分析 #

问题出在事件委托的处理逻辑上：

• 你给.dropdown_parent绑定了点击事件，并且在事件处理中调用了e.preventDefault()，这个方法会阻止当前事件的所有默认行为。
• 当点击下拉菜单里的<a>标签时，事件会通过冒泡机制传递到父元素.dropdown_parent，触发父元素的事件处理函数，e.preventDefault()会直接阻止<a>标签的跳转默认行为，导致链接无法正常打开。

解决方案 #

修改JavaScript代码，在执行e.preventDefault()之前，判断点击的目标是不是<a>标签，如果是则跳过阻止默认行为的逻辑：

$(document).ready(function() {
  $('body').on('click', '.dropdown_parent', function(e) {
    // 若点击对象是a标签，直接返回，不执行后续阻止默认行为的代码
    if ($(e.target).is('a')) {
      return;
    }
    
    e.preventDefault();
    e.stopPropagation();
    var getId = $(this).attr("data-id");
    
    if ($('#drop_' + getId).is(":visible")) {
      $('#drop_' + getId).hide();
    } else {
      $('.dropdown_child').hide();
      $('#drop_' + getId).show();
    }
  });
});

这样修改后，点击下拉菜单的触发区域（drop menu ...）仍能正常展开/收起菜单，点击<a>标签时则不会被阻止默认跳转行为，链接可以正常打开。

内容的提问来源于stack exchange，提问作者sami salaam