Question

我有一个小问题，我什至不知道该怎么解释。最主要的是，我有两个按钮，一个是打开编辑表单：

要删除的另一个项目：

现在，主要问题是单击时以及单击位置时的反应和反应。每当我单击按钮进行编辑时（如您所见，在边上都有一些填充），js会加载我需要的编辑表单，从而调用我指示它在编辑中单击时运行的函数“空间区域”按钮。

每当出现问题的地方都在这里，我单击要删除的按钮，这意味着当我单击垃圾箱（<img>元素本身）时，它绝对不起作用，尽管当我将鼠标移到蓝色矩形之外（即<img>元素），然后在具有填充的区域内单击，然后单击将调用我需要的函数。最重要的是，当我单击“填充区域”时，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是未定义的。尽管当我按下编辑按钮或元素时似乎没有发生这种情况。

Answer 1

该事件的目标是img标签，该标签可能没有您的JavaScript正在寻找的CSS类。听起来图像是具有CSS类的锚标记的子节点。相反，您需要从event.target元素开始爬上文档树，以查找CSS类。如果当前元素没有，请转到parentNode。继续向上移动直到parentNode为空。

JavaScript无法按预期反应

1 个答案: