具有点击事件的卡片组件内的 Bootstrap 4 按钮

Posted 2023-03-05

【中文标题】具有点击事件的卡片组件内的 Bootstrap 4 按钮

【英文标题】：Bootstrap 4 button inside card component that has click event

【发布时间】：2017-06-28 23:19:19

【问题描述】：

我有以下 html 代码来使用 bootstrap 4 生成基本卡。 单击卡片时，我想更改卡片的样式。但是，如果单击按钮，我不希望更改样式。 目前，当我点击 test1 按钮时，我也会激活 onCardClick() 函数。 有没有办法做到这一点，当我点击测试按钮1时，只有 Test1() 执行

<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>

【问题讨论】：

你在使用 Angular？如果是这样，也发布该代码。

【参考方案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