Не пойму, почему срабатывает событие click когда не нужно?

Question

[CityzenUNDEAD]

Приветствую!
Есть такая функция, которая создает клик или нажатие клавишы на элементе слайдера.

var onEffectToggle = function (effectToggle) {
effectToggle.addEventListener('click', function () {
toggleEffect(effectToggle);
});
effectToggle.addEventListener('keydown', function (evt) {
if (evt.keyCode === 32) {
toggleEffect(effectToggle);
} else {
return;
}
});
};

Проблема в том, что событие клика, как бы срабатывает даже если слайды просто переключать стрелками на клавиатуре.

Comments

[alex]

которая создает клик

создать клик? это щас на каком языке?

кидайте полное демо на jsfiddle или другую песочницу, приведенного вами кода недостаточно для решение вашей проблемы

[CityzenUNDEAD]

Alex, в jsfiddle можно как-то помимо кода, что бы отображалась графика, которая в папке проекта находится? А то так как-то не особо будет понятно.

[alex]

CityzenUNDEAD, для таких целей существуют подобные сервиcы

Answer 1

[hzzzzl]

попробовал вот прямо тут на странице тостера в консоли, срабатывает только на клике и по пробелу

Comments

[CityzenUNDEAD]

Хм. Значит ошибке где-то в другом месте.
Вот более обзорный кусок.

var toggleEffect = function (toggle) { // функция добавления и удаления эффектов при нажатии или клике
if (toggle.children[1].children[0].classList.contains('effects__preview--none')) {
imagePreview.classList = '';
} else if (toggle.children[1].children[0].classList.contains('effects__preview--chrome')) {
imagePreview.classList = '';
imagePreview.classList.add('effects__preview--chrome');
} else if (toggle.children[1].children[0].classList.contains('effects__preview--sepia')) {
imagePreview.classList = '';
imagePreview.classList.add('effects__preview--sepia');
} else if (toggle.children[1].children[0].classList.contains('effects__preview--marvin')) {
imagePreview.classList = '';
imagePreview.classList.add('effects__preview--marvin');
} else if (toggle.children[1].children[0].classList.contains('effects__preview--phobos')) {
imagePreview.classList = '';
imagePreview.classList.add('effects__preview--phobos');
} else if (toggle.children[1].children[0].classList.contains('effects__preview--heat')) {
imagePreview.classList = '';
imagePreview.classList.add('effects__preview--heat');
}
};

var onEffectToggle = function (effectToggle) { // функция переключающая эффекты наложения по клику и по нажатию клавиши
effectToggle.addEventListener('click', function () {
toggleEffect(effectToggle);
return;
});
effectToggle.addEventListener('keydown', function (evt) {
if (evt.keyCode === 32) {
toggleEffect(effectToggle);
} else {
return;
}
});
};

for (var i = 0; i < effectToggles.length; i++) { // цикл создающий замыкание для переключения эффектов
onEffectToggle(keyboardToggle[i]);
}

[hzzzzl]

попробуй так вместо цикла и var onEffectToggle =...

effectToggles.forEach((tgl, i) => {

const kt = keyboardToggle[i]

kt.addEventListener('click', function () {
  toggleEffect(kt);
});

kt.addEventListener('keydown', function (evt) {
  if (evt.keyCode === 32) {
    toggleEffect(kt);
  }
})

})

[CityzenUNDEAD]

hzzzzl, спасибо, но я js6 еще не изучал. Просто у меня задание, разобраться с этим кодом и понять почему тут, что-то работает не так. Фиг знает. Уже туплю 2 дня.

[hzzzzl]

CityzenUNDEAD, лучше всего и правда выложить кусок функционала на https://codepen.io а то так сложно сказать по структуре

может быть и что-то в этой строчке из детей элементов неправильно написано, так хз без примера toggle.children[1].children[0].classList.contains....

[CityzenUNDEAD]

hzzzzl, вот код целиком - https://jsfiddle.net/idustrialUNDEAD/pqv27sak/1/.
Только я хз как графику отобразить.