点击卡片内按钮同时触发卡片点击事件该如何处理？

这是典型的事件冒泡导致的问题，结合你现有的代码逻辑，额外的触发原因是：
你在.add-button的点击回调中用trigger触发了同属卡片子元素的.button-trigger的点击事件，trigger方法触发的点击事件默认会向上冒泡到父级.cards元素，进而触发卡片的点击逻辑，输出卡片对应的日志。

你可以任选以下任意一种方案实现需求：

方案1：用triggerHandler替代trigger触发按钮事件 #

triggerHandler只会执行对应元素绑定的事件回调，不会产生事件冒泡，也不会触发元素默认行为，完全符合你的需求。
修改后的JS代码如下：

$('.cards-trigger').on('click', function(){
    console.log('cards-trigger')
});

$('.button-trigger').on('click', function(){
    console.log('button-trigger')
});

$('.cards').on('click', function(e){
    e.stopPropagation();
    $(this).siblings().trigger('click')
});

$('.add-button').on('click', function(e){
    e.stopPropagation();
    // 把trigger改成triggerHandler
    $(this).siblings('.button-trigger').triggerHandler('click')
});

方案2：给.button-trigger的点击回调添加阻止冒泡逻辑 #

直接在按钮的点击事件里阻止冒泡，避免事件传递到父级卡片：

$('.button-trigger').on('click', function(e){
    e.stopPropagation();
    console.log('button-trigger')
});

方案3：在卡片的点击事件中判断触发源，排除按钮点击的场景 #

通过e.target判断实际点击的元素，如果是按钮就不执行卡片的逻辑：

$('.cards').on('click', function(e){
    // 如果点击的是add-button按钮，直接返回不执行后续逻辑
    if($(e.target).hasClass('add-button')) return
    e.stopPropagation();
    $(this).siblings().trigger('click')
});

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