如何仅触发一个事件“更改"或“点击" [英] How to trigger only one event 'change' or 'click'

问题描述

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

I have a number input tag on which I have two event listeners 'on-click' and 'on-change'. When I am click on arrow it triggers both. I would like to have one whichever triggers first without removing any of the event listeners. On clicking rapidly change event doesn't trigger until it looses focus from input tag(If I keep only change event). If I keep only click event then I won't be able to capture change event.

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

推荐答案

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

Use Observables. You can think about them as streams for events. Debouncing the output should give the result you want.

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

The debouncing step removes multiple events that happen in the specified time interval. If both events (or more than one copy of the same event) happens in less than 100 ms, only one event will be emitted.

关于消除可观察物: https://www.learnrxjs.io/operators/filtering/debouncetime.html

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

The above example uses different events from yours; just adapt it to listen to any of the events that you want. Lastly, subscribe to the Observable, and call the relevant event handling code there:

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

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

To use Observables on your page, include rx.js somewhere. Here is example code to load it from a CDN.

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

这篇关于如何仅触发一个事件“更改"或“点击"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！