如何在不破坏下拉菜单功能的情况下停止传播答案

【问题标题】：How to stop propagation without ruining dropdown menu features如何在不破坏下拉菜单功能的情况下停止传播
【发布时间】：2018-02-19 12:33:17
【问题描述】：

我创建了一个在视觉上类似于卡片（游戏卡片）的对象 - 一张卡片，上面有一张图片，下面有一些关于卡片的信息，包括文字和符号。页面上可以有很多卡片。

点击卡片会将用户带到一个新页面。这是通过使用 href 将所有卡片元素包装在 div 中来完成的。每张卡片还有一个带有一些选项的下拉菜单。最初的问题是，当点击下拉菜单时，卡片也会被点击。

我想在点击下拉菜单时阻止卡片被点击。下拉菜单本身在被点击时应该表现正常。

href div 和下拉元素如下图所示（我在href div 中使用onclick 来防止嵌套锚标签）：

<div onclick="window.location.href = 'someurl'" style="cursor: pointer;">
    ...
    <a href="#" id="dd" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        ...
    </a>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
        ...
    </ul>
    ...
</div

我尝试输入 event.stopPropagation 来阻止卡片被点击：

    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" onclick="event.stopPropagation(); $('#dd').toggle();">

虽然这种方法会阻止卡片被点击，但它也会忽略一些下拉菜单的功能。例如，单击屏幕上的任意位置或选择菜单中的选项不会再关闭它。菜单保持打开状态，直到明确单击下拉按钮。

【问题讨论】：

标签： javascript html twitter-bootstrap-3

【解决方案1】：

您可能希望从将您重定向到另一个页面的 div 中获取下拉菜单。

<div onclick="window.location.href = 'someurl'" style="cursor: pointer;">
    ...
    <a href="#" id="dd" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
    ...
    </a>
    ...
</div
<ul class="dropdown-menu dropdown-menu-right" role="menu">
    ...
</ul>

【讨论】：

不幸的是，我无法将 ul 标签带出该 div。下拉菜单也应该能够在没有实际卡片的情况下在其他网页上使用。

【解决方案2】：

This codepen 显示您想要使用的功能。它还使用 event.stopPropagation() ，不确定它是否与您已经尝试过的方式相同。但这里的不同之处在于它捕获了点击元素，您可以将我们自己的代码添加到每个点击事件中，例如关闭任何打开的菜单/重定向到另一个页面/其他操作。

Codepen here

您没有显示您使用的完整代码，因此我无法判断这是否完全符合您的要求，但您可以根据自己的需要进行调整

【讨论】：