typescript Angular 6 - 单击或聚焦时调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51378431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 - call function on click OR focus
提问by grhu
I want to be able to call a function from a component only on click OR focus. Here is a part of the components HTML:
我希望能够仅在单击或获得焦点时从组件调用函数。这是组件 HTML 的一部分：
<div class="form-add-new__input-box">
<input
#commentCategories
class="form-add-new__category-box"
(click)="toggleCategoriesSelection($event)"
(focus)="toggleCategoriesSelection($event)"
(keyup)="searchCategory($event.target.value)"
tabindex="0"
placeholder="Search or select">
<span class="icon-arrow-down"></span>
</div>
and the function:
和功能：
public toggleCategoriesSelection(event: Event): void {
event.stopPropagation();
event.preventDefault();
this.categoriesSelectOpen = !this.categoriesSelectOpen;
}
Basically I want to call toggleCategoriesSelection on click OR focus - right it is called 2 times on first click. I was hoping that something like this would work:
基本上我想在单击或焦点上调用 toggleCategoriesSelection - 对，第一次单击时调用 2 次。我希望这样的事情会奏效：
(click | focus)="toggleCategoriesSelection($event)"
But unfortunately, it doesn;t work like this. How can I do this?
但不幸的是，它不能像这样工作。我怎样才能做到这一点？
采纳答案by Malindu Sandaruwan
Actually you may not need to call toggleCategoriesSelectionon both the clickand focusevents. But if you want to do so you can use something like below.
实际上，您可能不需要在单击和焦点事件上都调用toggleCategoriesSelection。但如果你想这样做，你可以使用如下所示的内容。
Here we are debouching frequent function calls occurring during the smallTimeout.
在这里，我们消除了smallTimeout期间发生的频繁函数调用。
timeOutExceeded = true // initial value
public toggleCategoriesSelection(event: Event): void {
if (this.timeOutExceeded) {
// your logic
this.timeOutExceeded = false;
setTimeout(() => {
this.timeOutExceeded = true;
}, smallTimeout);
}
}
Also you may look into RXJS debouncing(or any other such techniques) below.
您也可以查看下面的 RXJS 去抖动（或任何其他此类技术）。
回答by Daniel Segura Pérez
Add stop propagation method to your click and focus event.
将停止传播方法添加到您的点击和焦点事件。
<input
#commentCategories
class="form-add-new__category-box"
(click)="$event.stopPropagation();$event.preventDefault();toggleCategoriesSelection($event)"
(focus)="$event.stopPropagation();$event.preventDefault();toggleCategoriesSelection($event)"
(keyup)="searchCategory($event.target.value)"
tabindex="0"
placeholder="Search or select">
<span class="icon-arrow-down"></span>
hope i help you!
希望我能帮到你！
