1
The project I am developing is composed of many forms with several buttons. What I need to develop is a way to catch double clicks and unnecessary requests for the API. So I developed a directive that I put on all the buttons.
<dx-button mltClick text="Enviar"(onClick)="submit()"></dx-button>
The directive basically prevents double clicks from happening and executing the Submit method more times than it should.
@Directive({
selector: '[mltClick]'
})
export class MultipleClicksDirective {
lastClick = 0;
constructor() {
}
@HostListener('click', ['$event'])
clickEvent(event) {
const currentTime = new Date().getTime();
const currentClick = currentTime - this.lastClick;
if (currentClick < 400) {
event.stopImmediatePropagation();
}
this.lastClick = currentTime;
}
}
There is one problem, though. As you may have noticed I am using Devextreme and its components so some buttons are created from the TS file.
this.dataGrid.instance.addColumn(new ButtonsColumn().add({
onClick: (event) => this.submit(event)
}));
Then I realized that I should put the directive code in a class with a static method like this:
export class ButtonClickUtils {
static clickEvent(event) {
const currentTime = new Date().getTime();
const currentClick = currentTime - this.lastClick;
if (currentClick < 400) {
event.stopImmediatePropagation();
}
this.lastClick = currentTime;
}
}
And call it in every method called by the click events
submit = (event) => {
ButtonClickUtils.clickEvent(event);
};
the idea was to detect multiple clicks and prevent before firing the same event twice or more.
1 problem: Directive works only on html buttons
2 Problem: Static method does not store the value of the this.lastClick variable;
3 problem: The project consists of numerous buttons and it would be impossible to maintain all forms after.
The solution I thought was to create a Provider that would detect all click-on events on a button. But I do not know whether it would be the best solution and whether it would be feasible to create such a type. If it is feasible as I would create a Provider that detects button-clicking events?
It became kind of hard to understand in the background what you need, but basically pq does not disable the buttons when clicked?
– LeAndrade
That would be a great solution, but would I have to put that code on every button? When disabling the button I would need to activate it again creating a duplicate routine in all forms.
– Qattus
Turning it on and off in a short period would automatically work but would have a Buttonclickutils.clickEvent(); in all methods?
– Qattus
When a new programmer creates a new button or form can’t forget to call the same method?
– Qattus
You’re the one who knows if you should turn the button back on. The idea would be this, call a function and run it every click on a button passing its reference, then you just disable that button clicked.
– LeAndrade
then falls in 3 problem, I can not simply call the function on all buttons
– Qattus
No pq? How do you want to control button status without placing a function for each button?
– LeAndrade
Each button has a different routine. I can add this disable function within the routine of each button. The problem is that there will be many buttons and every day there are new buttons being created.
– Qattus