javascript - Javascript 函数完成后 Overlay Div 消失

Question

首先，这是 fiddle :http://jsfiddle.net/ribbs2521/Q7C3m/1/

我以为我可以在 fiddle 上运行 JS，但它不起作用，无论如何我的所有代码都在那里，所以我认为我们应该很好。

因此，我正在尝试创建自己的自定义图像查看器，该查看器工作得很好，直到我尝试实现 PREV 和 NEXT (在 fiddle 中它们是文本，但实际上是图像)。我单击“下一步”，它会更改查看器中的图片，但随后我的叠加 div 就会消失。

我知道它实际上改变了图片的原因是，如果我在 prevImage() 和/或 nextImage() 末尾放置一个警报，我会看到更改后的图片，但是一旦我单击“确定”，它就会全部消失。

我不知道发生了什么。我不确定是我的 JS 还是 CSS 导致了这个问题，我对 JS、CSS 和 HTML 还很陌生。

谁能告诉我为什么执行这个函数后我的div消失了？

这是 JS:

var images = Array();
var cursor = 0;

function showHide(obj) {
    alert("Working");
    var overlay = document.getElementById("ImgOverlay");
    if (obj instanceof HTMLImageElement) {
        // Get list of images in gallery
        var gallery = document.getElementById("gallery");
        images = gallery.getElementsByTagName("img");
        cursor = -1;
        while (images[++cursor].src != obj.src) {}

        // Show the image
        putImageInViewer(obj);
        overlay.style.display = "block";

    } else if (overlay.style.display !== "none" && overlay.style.display !== "") { // If it's the div that you clicked...
        hideElement(overlay);
    }
}

function hideElement(element) {
    element.style.display = "none";
}

function putImageInViewer(obj) {
    var img = new Image();
    img.src = obj.src;
    var size = 600;
    var h = img.height;
    var w = img.width;
    // We want a max size of 600 but don't want to blow images up (bad graphics)
    // Images should be their actual size but limited to 600px MAX
    if (h <= 600 && w <= 600) {
        if (h > w) {
            size = h;
        } else {
            size = w;
        }
    }
    if (h > w) {
        document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" height=\"" + size + "\">";
    } else {
        document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" width=\"" + size + "\">";
    }
}

function nextImage() {
    // Check if we need to loop around
    if (cursor < images.length) {
        cursor++;
    } else {
        cursor = 0;
    }
    putImageInViewer(images[cursor]);
}

function prevImage() {
    // Check if we need to loop around
    if (cursor > 0) {
        cursor--;
    } else {
        cursor = images.length;
    }
    putImageInViewer(images[cursor]);
}

这是 CSS:

#wrap {
    margin: 0 auto;
}
#wrap li {
    float:left;
    position:relative;
    display:inline-block;
    width:240px;
    height:240px;
    margin:10px;
    padding:10px;
    background:#fff;
    box-shadow:0 0 5px rgba(0, 0, 0, .35);
    overflow: hidden;
}
#wrap li div {
    position:absolute;
    height:0;
    width:220px;
    background:rgba(0, 0, 0, .45);
    overflow:hidden;
    bottom:10px;
    left:10px;
    padding: 0 10px;
    line-height:50px;
    color:#fff;
    transition:height 1s;
}
#wrap li:hover div {
    height:50px;
}
#wrap li img {
    width: 240px;
    height: 240px;
    margin: 0px 0 0 0px;
    cursor: pointer;
}
#ImgOverlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    /*fallback*/
    background-color: rgba(0, 0, 0, 0.6);
    /*background-image:none;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;*/
    display: none;
}
#imgnav {
    position: fixed;
    top: 38%;
    left: 50%;
    margin: -15px 0 0 -363px;
    width: 730px;
    height: 60px;
}
#overlay-img {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -300px;
    width: 600px;
    height: 600px;
}
#overlay-img img {
    border: 2px solid white;
    display: block;
    margin: auto;
}

最后是 HTML:

<div id="wrap">
    <h1>An Image Gallery</h1>
    <ul id="gallery">
        <li>
            <img src="w" onclick="showHide(this);">
            <div>Image 1</div>
        </li>
        <li>
            <img src="w" onclick="showHide(this);">
            <div>Image 2</div>
        </li>
    </ul>
    <div id="clear"></div>
</div>
<!-- For Image Viewer -->
<div id="ImgOverlay" onclick="showHide(this);">
    <div id="imgnav"> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">PREV</span>
        <div id="overlay-img">
            <!-- Image will go here -->
        </div>  <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">NEXT</span>

    </div>
</div>
<!-- End Image Viewer -->

Answer 1

您可能遇到了 JavaScript event propagation 。简而言之，在 DOM 元素上触发的事件(例如“PREV”和“NEXT”按钮上的“click”事件)会在 DOM 中冒泡，并在每个原始元素的父元素上再次触发。在您的情况下，这意味着当您单击“NEXT”按钮时，它会触发 prevImage() ，然后当事件冒泡到 ImgOverlay 时，它会触发 显示隐藏(此)。

您需要修改事件处理程序以告诉浏览器不要传播该事件。将按钮标记更改为如下所示:

<span id="nextButton" style="color: white; cursor: pointer; float: left" height="60px" width="60px">NEXT</span>

然后使用以下代码来处理点击事件:

var nextButton = document.getElementById('nextButton');
nextButton.onclick = function (ev) {
  nextImage();

  if (!ev) {
    // Old versions of Internet Explorer do not pass the event to handlers.
    ev = window.event;
  }
  ev.cancelBubble = true;
  if (ev.stopPropagation) {
    // W3C standard, works in Chrome, Firefox, Safari, etc.
    ev.stopPropagation();
  }
};