Как вызвать только одно событие «изменить» или «клик»

Question

У меня есть тег ввода номера, по которому у меня есть два прослушивателя событий «по щелчку» и «при смене». Когда я нажимаю на стрелку, это вызывает оба. Я хотел бы, чтобы один из спусковых механизмов был первым, не удаляя ни одного слушателя события. При быстром нажатии событие изменения не сработает, пока оно не потеряет фокус из входного тега (если я сохраню только событие изменения). Если я сохраню только событие клика, я не смогу захватить событие изменения.

<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>

Answer 2

Вы можете добавить к данным boolian (например, isInvoked: false).При запуске функции проверьте:

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