Javascript 意外地执行类内部的函数

Question

我有一个模态类来分别显示和隐藏模态。这个类里面有两个函数；打开()和关闭()。我将这些函数与 openModal() 函数相关联，并将此函数添加到图像 div 的 onclick 中。当我单击图像时，模态内会显示一个更大的图像，但是当我想关闭模态时，它会关闭模态并再次运行 open() 函数。所以看起来关闭按钮不起作用。

我的类(class)；

class Modal {
    constructor(overlay) {
        this.overlay = overlay;
        const closeButton = overlay.querySelector('.button-close')
        closeButton.addEventListener('click', this.close.bind(this));
        overlay.addEventListener('click', e => {
            this.close();
        });
    }
    open() {
        this.overlay.classList.remove('is-hidden');
    }
    close() {
        this.overlay.classList.add('is-hidden');
    }
}

我如何在 main.js

中调用此函数

const modal = new Modal(document.querySelector('.modal-overlay'));
window.openModal = modal.open.bind(modal);

图片分区

<div onClick="openModal()" class="item3"><img style='height: 100%; width: 100%; object-fit: contain' id="${id}" src="${namImage}">
  <div class="is-hidden modal-overlay">
    <div class="image-modal">
       <span class="button-close">×</span>
      <img src="${namImage}" width="95%">
    </div>
  </div>
</div>

我需要对这个问题进行审查。

谢谢

Answer 1

您的 .button-close 位于 .modal-overlay 内，因此虽然点击它会触发 close 功能，但它也会触发 open 函数，因为点击也是在 .modal-overlay 上。在close函数中调用stopPropagation:

close(e) {
    e.stopPropagation();
    this.overlay.classList.add('is-hidden');
}

class Modal {
    constructor(overlay) {
        this.overlay = overlay;
        const closeButton = overlay.querySelector('.button-close')
        closeButton.addEventListener('click', this.close.bind(this));
        overlay.addEventListener('click', e => {
            this.close();
        });
    }
    open() {
        this.overlay.classList.remove('is-hidden');
    }
    close(e) {
        e.stopPropagation();
        this.overlay.classList.add('is-hidden');
    }
}

const modal = new Modal(document.querySelector('.modal-overlay'));
window.openModal = modal.open.bind(modal);

.is-hidden {
  display: none;
}

<div onClick="openModal()" class="item3"><img style='height: 100%; width: 100%; object-fit: contain' id="${id}" src="${namImage}">
  <div class="is-hidden modal-overlay">
    <div class="image-modal">
       <span class="button-close">× (CLICK TO CLOSE)</span>
      <img src="${namImage}" width="95%">
    </div>
  </div>
</div>

您还可以考虑使用 Javascript 正确附加所有监听器，而不是使用内联处理程序:

class Modal {
    constructor(overlay) {
        this.overlay = overlay;
        const closeButton = overlay.querySelector('.button-close')
        closeButton.addEventListener('click', this.close.bind(this));
        overlay.addEventListener('click', e => {
            this.close();
        });
    }
    open() {
        this.overlay.classList.remove('is-hidden');
    }
    close(e) {
        e.stopPropagation();
        this.overlay.classList.add('is-hidden');
    }
}

const modal = new Modal(document.querySelector('.modal-overlay'));
modal.overlay.parentElement.onclick = modal.open.bind(modal);

.is-hidden {
  display: none;
}

<div class="item3"><img style='height: 100%; width: 100%; object-fit: contain' id="${id}" src="${namImage}">
  <div class="is-hidden modal-overlay">
    <div class="image-modal">
       <span class="button-close">× (CLICK TO CLOSE)</span>
      <img src="${namImage}" width="95%">
    </div>
  </div>
</div>