Html 具有click事件的卡组件内的Bootstrap 4按钮

我有下面的html代码来使用Bootstrap4生成基本卡。 我想在单击卡片时更改卡片的样式。但是，如果单击按钮，我不希望样式更改。 此时，当我单击test1按钮时，我还将激活onCardClick（）函数。 有没有一种方法可以这样做，当我单击test按钮1时，只执行Test1（）

一些头衔
测试1
测试2

您可以尝试以下方法来阻止事件在dom中冒泡：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card"
           (click)="onCardClick()">
        <div class="card-block">
          <h4 class="card-title d-inline">Some Title</h4>
          <button class="btn btn-primary"
                  (click)="onTest1($event)">test1
          </button>
          <button class="btn btn-primary"
                  (click)="onTest2($event)">test2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

---

你用的是角度？如果是这样，也发布代码。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card"
           (click)="onCardClick()">
        <div class="card-block">
          <h4 class="card-title d-inline">Some Title</h4>
          <button class="btn btn-primary"
                  (click)="onTest1($event)">test1
          </button>
          <button class="btn btn-primary"
                  (click)="onTest2($event)">test2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

import {Component} from "@angular/core"

@Component({
    selector: 'test',
})

export class Test
{
    onTest1(event)
    {
        event.stopPropagation();
        //or event.preventDefault()
        //stuff to run
    }

    onTest2(event)
    {
        event.stopPropagation();
        //stuff to run
    }

}