可全点击卡片内Dropdown点击时误触发Modal的问题解决求助

问题原因 #

你的可点击卡片效果是靠stretched-link实现的，这个类会自动将绑定的a标签设置为绝对定位，铺满整个最近的非static定位父容器（也就是当前的card-body），所以整个卡片区域的点击事件都会优先被这个触发Modal的a标签捕获，导致你点击Dropdown按钮的事件被覆盖。

解决方法 #

只需要给Dropdown的外层容器添加相对定位和更高的层级，让Dropdown区域的点击优先级高于底部的stretched-link即可。

代码修改示例 #

你只需要修改包裹Dropdown的span标签，新增两个Bootstrap内置工具类：

<!-- 修改前 -->
<span class="d-inline float-right">

<!-- 修改后 -->
<span class="d-inline float-right position-relative z-2">

完整修改后的代码如下：

<div class="card card-container">
    <div class="card-body">
        <img class="mr-4" src="images/icon.png" width="30px" height="30px" >
        <a href="#" data-toggle="modal" data-target="#viewContact" style="color: inherit; "class="stretched-link">Contact_name</a>
        <!-- 仅修改了这一行的类属性 -->
        <span class="d-inline float-right position-relative z-2">
            <div class="dropdown">
                <a href="#" id="imageDropdown" data-toggle="dropdown">
                    <img src="images/ellipsis.png" width="30px" height="30px">
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
                    <li data-toggle="modal" data-target="#editContact" role="presentation"><a class="ml-3" role="menuitem" tabindex="-1" href="#">Edit</a></li>
                    <li data-toggle="modal" data-target="#deleteContact" role="presentation"><a class="ml-3" style="color: red;" role="menuitem" tabindex="-1" href="#">Delete</a></li>
                </ul>
            </div>
        </span> 
    </div>
</div>

低版本Bootstrap兼容方案 #

如果你使用的Bootstrap版本没有内置z-2这类层级工具类，可以自行添加自定义样式：

/* 给包裹Dropdown的span添加该类即可 */
.dropdown-wrapper {
  position: relative;
  z-index: 2;
}

修改后点击Dropdown区域只会触发下拉菜单逻辑，点击卡片其他区域仍然可以正常弹出查看联系人的Modal，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Lezette Leuterio