Bootstrap卡片点击事件冲突：Read More触发跳转而非模态框

问题场景 #

我有一个Bootstrap卡片，点击卡片会将用户重定向至其他页面。卡片内的描述设置了字符限制，当内容超出设定长度时，会显示“read more...”链接，期望点击该链接时打开模态框以查看并编辑完整描述，但当前点击“read more...”时，会触发卡片的跳转事件而非打开模态框。

相关代码 #

HTML代码

<div id="someid" class="card tile-card estimate">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">Some Text</p>
         <p class="text-xs mb-0 tile-subtitle-p">Some More Text</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;">@EFITStatus</p>
         <p class="text-xs mb-0 tile-subtitle-p fifty-chars" style="text-align: left;" title="Description">
            Some fixed character description
         </p>
         <div style="display:inline-flex">
            <span class="tile-number-title"></span>
            <h3 class="tile-number mb-0"></h3>
         </div>
         <div style="display:inline-flex">
            <span class="tile-number-title"></span>
            <h3 class="tile-number mb-0"></h3>
         </div>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Footer</p>
   </div>
</div>

卡片跳转事件代码

$('.estimate').on('click', function (item) {
    var eFITID = $(this).data('efitid');
    window.location.href = "my path";
});

字符限制及模态框触发代码（修改后）

$(function () {
    var maxL = 20;
    $('.fifty-chars').each(function () {
        var text = $(this).text().trim();
        if (text.length > maxL) {
            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $(this).html(begin)
                .append($('<a class="readmore"/>').html('read more...'))
                // 补充原代码缺失的隐藏完整文本元素
                .append($('<span class="hiddenText" style="display:none;">' + end + '</span>'));
        }
    });
    $(document).on('click', '.readmore', function (e) {
        // 阻止事件向上冒泡，避免触发卡片跳转
        e.stopPropagation();
        $(this).next('.hiddenText').slideToggle(400);
        $("#modalEditDescription").modal('show');
    });
});

解决思路 #

问题根源是事件冒泡：点击“read more...”链接时，点击事件会沿着DOM树向上传播，最终触发父元素.estimate的跳转事件。通过在.readmore的点击事件中调用e.stopPropagation()，可以阻止事件继续向上传递，从而只触发模态框的打开逻辑，而不会触发卡片的跳转。同时补充了原代码中缺失的.hiddenText元素，确保折叠展开功能正常生效。

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