У меня есть небольшая проблема, которую я даже не знаю, как объяснить.Главное, что у меня есть две кнопки, одна из которых - открыть форму редактирования:
И ещеодин для удаления и элемент: 
Теперь основная проблема заключается в том, что и как реагирует, когда я нажимаю и где я нажимаю.Всякий раз, когда я нажимаю на кнопку для редактирования (как вы можете видеть, у нее немного отступы по бокам), js загружает нужную мне форму редактирования, вызывая функцию, которую я указал, чтобы она запускалась всякий раз, когда в редактировании происходит щелчокКнопка «space-area».
Всякий раз, когда возникает проблема, я нажимаю на кнопку, чтобы удалить, и здесь я имею в виду всякий раз, когда нажимаю на корзину (сам элемент <img>), он абсолютно ничего не делает, хотя, когда я перемещаю мышь за пределы синего прямоугольника (другими словами, элемент <img>) и щелкаю внутри области с отступом, THEN щелчок вызывает нужную мне функцию,Кроме того, когда я нажимаю «область заполнения», event.target по какой-то причине не определено.
Кажется, я не могу понять причину этого, спасибо за любую помощь.
РЕДАКТИРОВАТЬ: добавлен JS-код в соответствии с запросом:
document.addEventListener('click',function(e){
e.preventDefault();
const eTarget = event.target;
console.log(event.target);
switch(true){
case eTarget.classList.contains('close-edit'):
editContentContainer.classList.toggle('show');
break;
case eTarget.classList.contains('add-data'):
case eTarget.classList.contains('edit-data'):
case eTarget.classList.contains('delete-data'):
asyncCollectAndAction(eTarget.id);
break;
case eTarget.classList.contains('add-new-flavour'):
addNewFlavourToProduct(eTarget);
break;
}
});
const asyncCollectAndAction = (targetID) => {
/*
Action type:
1 - Insert/Add
2 - Edit
3 - Delete
*/
console.log('target Id is: ', targetID);
let collectedData = '';
let formCollector = ''
const categoryType = targetID.split('-')[0];
const actionType = targetID.split('-')[1];
console.log('action type is: ', actionType, typeof(actionType), actionType);
if(actionType != 'delete' || actionType != "delete"){
formCollector = document.querySelectorAll(`[data-category^=${targetID}`);
}
}
Просто чтобы подтвердить то, что я имел в виду, всякий раз, когда я нажимаю на кнопку, чтобы удалить (на самом элементе), JS регистрирует щелчокconsole.log(event.target); выводит элемент, на который я нажал), но не вызывает функцию asyncCollectAndAction(eTarget.id);.Всякий раз, когда я выхожу за пределы элемента, но все еще внутри границы отступа (зеленая область между полем и границами элемента), только тогда вызывается функция asyncCollectAndAction(eTarget.id);, но event.target не определена.Этого не происходит, хотя, когда я нажимаю на кнопку или элемент редактирования, кажется, что это происходит только на кнопке удаления.