Clearinterval при щелчке мышью или при наведении курсора

Question

У меня есть полноэкранный слайдер изображений, который не имеет функции автозапуска, поэтому мне пришлось написать собственный скрипт, чтобы нажать на следующую кнопку.

Вот

var interval = setInterval(function() {

document.querySelector('.fp-controlArrow.fp-next').click();


}, 7000);

setTimeout(function( ) { clearInterval( interval ); }, 44000);

Но теперь я бы хотел очистить Interval всякий раз, когда пользователь нажимает кнопку того же класса (.fp-controlArrow.fp-next) . Может ли JS как-то различать разницу между симулированным кликом и реальным кликом мыши? Если так, какой код для этого?

А если нет, то возможно ли очистить интервал при наведении на кнопку с классом.fp-controlArrow.fp-next?

Спасибо!

Answer 1

Ты можешь использовать mousedown событие для реального клика.

var el = document.querySelector('.fp-controlArrow.fp-next')
el.addEventListener('mousedown', function(){
    clearInterval( interval );
});

Рабочий пример: https://jsfiddle.net/fov47eny/

Также вы можете использовать isTrusted но он имеет ограниченную поддержку в браузерах.

if (e.isTrusted) {
    /* The event is trusted. */
} else {
    /* The event is not trusted. */
}

Answer 2

Да, вы можете различить сгенерированное пользователем событие от события сгенерированного кода, используя свойство isTrusted объекта события в прослушивателе событий.

var elem = document.querySelector('.fp-controlArrow.fp-next');

elem.addEventListener("click", function( event ) {   
    if(event.isTrusted)
        clearInterval(interval);

  }, false);

https://developer.mozilla.org/en/docs/Web/API/Event/isTrusted