javascript - 带有功能性关闭按钮的弹出窗口(HTML、CSS、JavaScript)

Question

我完全是个菜鸟，但我正在尝试制作一个网站，不幸的是我遇到了一个问题。

我在网格中有一组文章(卡片)。每张卡片都包含一个带有标题的“缩略图”、图像和文本的简短预览。这个想法是，当您单击卡片元素时，将出现一个弹出窗口，其中包含可能包含不同 HTML 和 CSS 的完整文章。单击后，背景也会变得模糊。弹出窗口的右上角将有一个关闭按钮。

我遇到的问题是整篇文章是卡片元素的子元素。这意味着点击功能在文章内部不断发生。所以即使我点击关闭按钮，它也会立即重新打开。我希望用户能够单击文章并与之交互而不会意外关闭它，除非他们单击了 .close div。

请允许我分享代码(它是用 pug/jade 编写的):

HTML(哈巴狗):

.card(onclick="expandFunction()")
    .image
    .information
        h4.title Preview Title
        p.description Preview Description
    #blurry.hideme
    article#full.hideme
        h4.m-title Main Title
        p.m-description Main Description 
        p.m-body Main Article
        .close(onclick="contractFunction()")

Javascript:

function expandFunction() {
  var y = document.getElementById("full");
  var x = document.getElementById("blurry");
  y.classList.toggle("hideme");
  x.classList.toggle("hideme");
}

function contractFunction() {
  var y = document.getElementById("full");
  var x = document.getElementById("blurry");
  y.classList.toggle("hideme");
  x.classList.toggle("hideme");
}

hideme 类只是一个应用于 div 的 display: none。

此外，现在我的 javascript 被硬编码为使用 ID 打开其中一篇卡片文章。是否可以改为使用相对路径，这样我就不必为我拥有的每张卡创建一个独特的函数？

Answer 1

据我所知，您只需阻止点击事件通过 DOM 传播，我将像这样更改您的脚本:

function expandFunction(event) {
   event.stopPropagation();
   var y = document.getElementById("full");
   var x = document.getElementById("blurry");
   element.classList.toggle("hideme");
   x.classList.toggle("hideme");
}

function contractFunction(event) {
   event.stopPropagation();
   var y = document.getElementById("full");
   var x = document.getElementById("blurry");
   element.classList.toggle("hideme");
   x.classList.toggle("hideme");
}

通过这种方式，您所做的任何点击都只会影响触发它的元素，而不会沿着 DOM 移动触发其他事件