当我点击红色按钮时，我应该只在控制台中看到红色而不是灰色。我怎样才能做到这一点？
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `
<button style="height: 100px; width: 200px;" (click)='gray()'> Gray
<button style="height: 20px; width: 40px; background-color:red" (click)='red()'>
Red
</button>
</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
red() {
console.log('red');
}
gray() {
console.log('gray');
}
}
编辑：我已将问题调整为 div 内的按钮
我已经在下面更新了您的代码。当您单击要传递单击事件（如$event）的红色按钮时，然后使用此事件，在您调用的方法中，添加event.stopPropogation();以阻止下一个鼠标事件触发。
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `
<button style="height: 100px; width: 200px;" (click)='gray()'> Gray
<button style="height: 20px; width: 40px; background-color:red" (click)='red($event)'>
Red
</button>
</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
red($event: MouseEvent) {
console.log('red');
$event.stopPropagation();
}
gray() {
console.log('gray');
}
}
附注。最终你不应该嵌套按钮。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句