如何在不破坏下拉框功能的情况下停止传播

Question

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

单击一张卡片会将用户带到一个新页面。这是通过使用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.stop传播来阻止卡被点击：

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

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

Answer 1

此代码笔显示您想要使用的功能。它还使用事件。stopPropagation（），不确定是否与您已经尝试过的方法相同。但这里的区别在于，它捕获了click元素，您可以向每个click事件添加我们自己的代码，例如关闭任何打开的菜单/重定向到另一个页面/其他操作。

这里有密码

您还没有显示您使用的完整代码，所以我不能说这是否完全符合您的需求，但您可以根据自己的需求对其进行调整

Answer 2

您可能希望从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>