帶有單擊事件的卡組件中的Bootstrap 4按鈕

Question

我有以下html代碼來使用引導程序4生成基本卡片。 我想單擊卡片時更改卡片的樣式。但是，如果按鈕被點擊，我不希望樣式改變。 目前，當我點擊test1按鈕時，我也會激活CardClick（）函數。 有沒有辦法做到這一點，這樣當我點擊測試按鈕1只測試1（）執行

<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()">test1</button> 
     <button class="btn btn-primary" (click)="onTest2()">test2</button> 
     </div> 
    </div> 
</div> 

Answer 1

你可以試試這個從冒泡的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> 

並在您的組件：

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 
    } 

}