Question

我很难理解为什么我无法获得AddEventListener点击事件来处理出现在模态中的一组图像。在模态方面涉及之前我让他们工作，但我不确定模态是否打破了图像点击事件。

这是有问题的函数，在大量document.addEventListener("DOMContentLoaded", function (event)函数中调用：

 var attachClick = function () {
        Array.prototype.forEach.call(containers, function (n, i) {
            n.addEventListener('click', function (e) {

                // populate
                cleanDrawer();
                var mediaFilterSelected = document.querySelector('.media-tags .tag-container .selected');
                var selectedFilters = "";
                if (mediaFilterSelected != "" && mediaFilterSelected != null) {
                    selectedFilters = mediaFilterSelected.innerHTML;
                }
                var portfolioItemName = '';
                var selectedID = this.getAttribute('data-portfolio-item-id');
                var data = portfolioItems.filter(function (item) {
                    portfolioItemName = item.name;
                    return item.id === selectedID;
                })[0];

                clientNameContainer.innerHTML = data.name;
                descriptionContainer.innerHTML = data.description;
                var childItems = data.child_items;

                //We will group the child items by media tag and target the unique instance from each group to get the right main banner
                Array.prototype.groupBy = function (prop) {
                    return this.reduce(function (groups, item) {
                        var val = item[prop];
                        groups[val] = groups[val] || [];
                        groups[val].push(item);
                        return groups;
                    }, {});
                }
                var byTag = childItems.groupBy('media_tags');
                if (childItems.length > 0) {
                    handleBannerItem(childItems[0]);
                    var byTagValues = Object.values(byTag);
                    byTagValues.forEach(function (tagValue) {
                        for (var t = 0; t < tagValue.length; t++) {
                            if (tagValue[t].media_tags == selectedFilters) {
                                handleBannerItem(tagValue[0]);
                            }
                        }
                    });
                    childItems.forEach(function (item, i) {
                        // console.log("childItems.forEach"); we get into here
                        var img = document.createElement('img'),
                            container = document.createElement('div'),
                            label = document.createElement('p');
                        container.appendChild(img);
                        var mediaTags = item.media_tags;

                        container.className = "thumb";
                        label.className = "childLabelInactive thumbLbl";
                        thumbsContainer.appendChild(container);
                        if (selectedFilters.length > 0 && mediaTags.length > 0) {
                            for (var x = 0; x < mediaTags.length; x++) {
                                if (mediaTags[x] == selectedFilters) {
                                    container.className = "thumb active";
                                    label.className = "childLabel thumbLbl";
                                }
                            }
                        }
                        else {
                            container.className = i == 0 ? "thumb active" : "thumb";
                            // console.log("no tags selected"); we get to here
                        }

                        img.src = item.thumb;
                        if (item.media_tags != 0 && item.media_tags != null) {
                            childMediaTags = item.media_tags;
                            childMediaTags.forEach(function (cMTag) {
                                varLabelTxt = document.createTextNode(cMTag);
                                container.appendChild(label);
                                label.appendChild(varLabelTxt);
                            });
                        }
                        //console.log("before adding click to images"); we get here
                        console.log(img.src);
                        img.addEventListener("click", function () {
                            console.log("thumbnail clicked"); //this is never reached
                            resetThumbs();
                            handleBannerItem(item);
                            container.className = "thumb active";
                        });

                    });
                }

                attachClick();

                //open a modal to show off the portfolio pieces for the selected client
                var tingleModal = document.querySelector('.tingle-modal');
                drawer.className = 'drawer';
                var portfolioModal = new tingle.modal({
                    onOpen: function() {
                        if(tingleModal){
                            tingleModal.remove();
                        }
                        console.log('modal open');
                    },
                    onClose: function() {
                        console.log('modal closed');
                        //tingleModal.remove();
                    }
                });

                e.preventDefault();
                portfolioModal.open();
                portfolioModal.setContent(document.querySelector('.drawer-content').innerHTML);

            });

        });
    };

我遇到的具体问题：

console.log(img.src);
img.addEventListener("click", function () {
    console.log("thumbnail clicked"); //this is never reached
    resetThumbs();
    handleBannerItem(item);
    container.className = "thumb active";
});

我尝试删除e.PreventDefault()位，但这并没有解决问题。我知道正在创建图像，因此img变量不为空。我觉得addEventListener设置正确。我也试过在img.src = item.thumb线下移动那一点，但没有运气。出于某种原因，单击事件不会触发图像。

Answer 1

DOMContentLoaded上的模式中是否存在图像？如果是这种情况，您可以尝试将点击处理委托给父元素。

您可以尝试此处显示的委派方法：Vanilla JavaScript Event Delegation

Answer 2

所以，如果我理解正确，你有一个位于图像上方的模态（它具有更高的z-index）？那么在这种情况下，点击不会到达图像，因为它们会击中模态。您可以通过将css属性pointer-events: none;应用于模态来传递位于上方的元素的点击，但这对模式的目的有所争议。

在模态窗口中忽略的图像上的事件监听器

2 个答案: