javascript - 如何只触发一个事件 'change' 或 'click'

Question

我有一个数字输入标签，上面有两个事件监听器“on-click”和“on-change”。当我点击箭头时，它会触发两者。我想先触发一个而不删除任何事件监听器。 单击快速更改事件不会触发，直到它失去输入标签的焦点(如果我只保留更改事件)。如果我只保留点击事件，那么我将无法捕获更改事件。

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

Answer 1

使用 Observables。您可以将它们视为事件流。对输出进行去抖动应该会得到您想要的结果。

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 毫秒内发生，则只会发出一个事件。

关于去抖动 Observables: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>