覆盖Div在Javascript函数完成后消失

首先，这里是小提琴：

我想我可以在fiddle上运行JS，但它不起作用，不管怎样，我所有的代码都在那里，所以我认为我们应该很好

因此，我正在尝试创建自己的自定义图像查看器，在我尝试实现PREV和NEXT之前，它一直工作得很好（在小提琴中，它们是文本，但实际上是图像）。我单击“下一步”，它会更改查看器中的图片，但随后我的覆盖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]);
}

最后，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 -->

图像画廊


图1


图2


上
下一个

您可能遇到了JavaScript。简而言之，在DOM元素上触发的事件（例如“PREV”和“NEXT”按钮上的“click”事件）会使DOM冒泡，并在每个原始元素的父元素上再次触发。在您的情况下，这意味着当您单击“下一步”按钮时，它将触发

prevImage（）

，然后当事件冒泡到

ImgOverlay

，它将触发

showHide（this）

您需要修改事件处理程序，以告知浏览器不要传播事件。将按钮标记更改为以下内容：

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

---

我想这可能是一些奇怪的事情，你不会仅仅从阅读教程中知道。无论如何，我按照你的建议修改了代码，但当我单击按钮时，它不会触发nextButton.onclick（）。好的，我让它工作了。我所做的是保留onclick按钮，但我将事件传递给nextImage（）方法并在那里终止传播。感谢您的快速响应！

<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();
  }
};