Question

我有一个组件，其中有两件事，比如说“订单信息”和“日期选择器”。通过单击该组件，它将显示订单信息。

我想要的是，如果用户单击datepicker图标，则不会触发click事件，因此，我正在尝试执行这种类型的逻辑：

<app-order-info
  (click)="$event.target.classList.contains('icon-mydrpcalender') ? null : showOrdersinfo()"     
>
</app-order-info>

但这仅在chrome中有效，但在其他浏览器（例如firefox和Internet Explorer）中，即使我单击datepicker图标，它仍会触发click事件。

如何解决此问题。

Answer 1

您可以尝试使用CSS pointer-events: none来解决它。如果您不希望它在该日历图标上触发

Answer 2

我认为最好添加所有以下代码：

"$event.target.classList.contains('icon-mydrpcalender') ? null : showOrdersinfo()"

在组件内部的函数中。阅读有关它的内容并尝试进行设置： https://en.wikipedia.org/wiki/Polyfill_(programming)

Answer 3

最简单的方法是处理组件中各个元素上的(click)并从组件中发出事件。像这样：

@Component({
selector:'sample'
template: "<a (click)='emitThis($event)' >Emit</a>  <a>Do Not Emit</a>"
 })
 export class YourComponent { 
    @Output() eventEmitter: EventEmitter = new EventEmitter();
    emitThis(evnt){
        this.eventEmitter.emit(evnt);
    }
}

像<sample (eventEmitter)='callSomeFunction(event)'></sample>

一样使用

Angular：如何实现基于条件的单击事件？

3 个答案: