<button
[ngClass]="['btn-x', 'btn-y--']"
(click)="clicked($event, 'DISABLED')"
[disabled]="disabled"
>
<span [style.pointer-events]="disabled ? 'none' : ''"></span>
<span *ngIf="showCircle">
<img src="/*****/icons/******.gif" alt="*****" class="btn-spinner" />
</span>
</button>
clicked($event: MouseEvent, prop) {
if(prop === 'DISABLED')
return;
if ($event.target !== $event.currentTarget && this.disabled) {
$event.preventDefault();
} else {
this.onClick.emit($event);
}
}
It could help with any browser but also you can implement variable that tells you if this is disabled or not!
I have a button, which is disabled. Inside of this button, there is also a span element. In Chrome, when the button is disabled and is being clicked or the span is being clicked, it works as intended.
But in IE, even when the button is disabled, it still fires the click function! It’s crucial for my application to not fire the click function.
Internet Explorer Version: 11.657.18362.0
HTML Code
<button
[ngClass]="['btn-x', 'btn-y--']"
(click)="clicked($event)"
[disabled]="disabled"
>
<span [style.pointer-events]="disabled ? 'none' : ''"></span>
<span *ngIf="showCircle">
<img src="/*****/icons/******.gif" alt="*****" class="btn-spinner" />
</span>
</button>
Angular-function
clicked($event: MouseEvent) {
if ($event.target !== $event.currentTarget && this.disabled) {
$event.preventDefault();
} else {
this.onClick.emit($event);
}
}
Another problem is, that for some reason, I am not even able to use IE for debugging, therefore my opportunities are quite limited. (I am creating a new question for this).
Do you know a alternative how to prevent these function from being called, which also works for IE?
Any help is appreciated,
Thanks in advance!
I test with your code and it throws errors: “disabled ” and “onClick” doesn’t exist. I edit it and make
The problem is, that this button shall only be disabled, when the parameter disabled is true. i cant pass the fixxed string ‘DISABLED’ into it.
if ($event.target !== $event.currentTarget && this.disabled) { $event.preventDefault(); } else { this.onClick.emit($event); } –> in my if statement there is already a check for the disabled variable, still tried to pass it, and the same result.
