<div class="card">
  <button type="button" class="collect">
    收藏
  </button>
</div>

<script>
  document
    .querySelector('.card')
    .addEventListener(
      'click',
      () => window.alert('跳转到卡片详情')
    );
  
  document
    .querySelector('.collect')
    .addEventListener(
      'click',
      (event) => {
        // 尝试删除这行看看点击收藏是什么效果
        event.stopPropagation();
        
        window.alert('收藏')
      },
    );
</script>
.card {
  width: 100px;
  height: 100px;
  background: pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.