Question

我有以下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>

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
    }

}

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

1 个答案: