Question

我有一个数字输入标签，上面有两个事件监听器“ on-click”和“ on-change”。当我单击箭头时，两者都会触发。我希望有一个先触发，而不删除任何事件侦听器。单击快速更改事件直到它从输入标签上释放焦点后才会触发（如果我仅保留更改事件）。如果我仅保留点击事件，那么我将无法捕获更改事件。

<input type="number" @click="function()" @change="function()" />

Answer 1

使用可观察物。您可以将它们视为事件流。对输出进行反跳应该可以得到想要的结果。

var event_a = Rx.Observable.fromEvent(document, 'mousemove'); 
var event_b = Rx.Observable.fromEvent(document, 'click'); // or in this case (input_element, 'click')

var debounce_ms = 100;
var debounced_event = merge(event_a, event_b).debounceTime(debounce_ms);

反跳步骤将删除在指定时间间隔内发生的多个事件。如果两个事件（或同一事件的多个副本）都在不到100毫秒内发生，则只会发出一个事件。

关于消除可观测对象：https://www.learnrxjs.io/operators/filtering/debouncetime.html

上面的示例使用与您的事件不同的事件；只需对其进行调整即可收听您想要的任何事件。最后，订阅Observable，然后在此处调用相关的事件处理代码：

debounced_event.subscribe(() => {
    // do event handling things here
});

要在页面上使用Observables，请在某处包含rx.js。这是从CDN加载示例代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.js"></script>

Answer 2

您可以将布尔值添加到数据中（例如isInvoked：false）。函数运行时检查：

if (this.isInvoked) return; this.isInvoked=true; //rest of your code here.....

如何仅触发一个事件“更改”或“点击”

2 个答案: