Question

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

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

我想在点击下拉菜单时停止点击该卡。单击下拉菜单本身应该正常。

href div和dropdown元素如下所示（我在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();">

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

Answer 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>

Answer 2

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

Codepen here

您尚未显示您使用的完整代码，因此我无法确定这是否符合您的要求，但您可以根据自己的需要进行调整

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

2 个答案: