JavaScript通过querySelector添加事件监听器不起作用。

Question

大家好，这是我的 JavaScript 代码：

window.onload = function () {

    function hideAds() {
        setTimeout(hide, 2000);
    }

    function hide() {
        var ads = document.querySelector(".ads");
        ads.style.marginTop = (-ads.offsetHeight) + "px";
    }

    function reveal() {
        ads.style.marginTop = "";
        hideAds();
    }
    var ads = document.querySelector(".ads");
    ads.addEventListener("click", reveal, true);


    hideAds();

}

从这段代码来看，除了最后第二行的"ads.addEventListener"之外，一切都正常。是什么原因导致这样的情况呢？我在这里做错了什么吗？

我需要通过单击添加了ads类的div来调用我的reveal函数。

有人可以帮帮我吗？

- 3gwebtrain

---

对我来说它运行良好。也许你想将监听器添加到父级，因为.ads可能是隐藏的。 - jasssonpet

@patrick 是啊，帕特里克。您没有看到代码有多漂亮吗？你在说什么？ :) - Šime Vidas

Patrick DW所说的是正确的。由于紧急情况，我无法格式化代码。非常抱歉。 - 3gwebtrain

@Šime Vidas：是啊，我当时在想什么呢？;o) - user113716

@3gwebtrain：如果你不知道怎么做，编辑区域顶部有一排按钮。你只需选择你的代码并点击Code Sample按钮。它看起来像**{ }**。 - user113716

如果您只想完成工作，请迭代 var ads 然后对每个 ads[i] 调用该函数。 - viveksinghggits

Answer 1

你提供的代码应该可以直接使用。jsFiddle

但我会尝试对你的代码进行重构，如下所示。

HTML

<div class="ads">Blah blah blah</div>

JavaScript

function setMarginTop(element, marginTop) {
    element.style.marginTop = marginTop || null;
}

function hideAds(element, marginTop, ms) {
    setTimeout(function() {
        setMarginTop(element, marginTop);
    }, ms || 2000);
}

window.addEventListener('load', function () {
    var ads = document.querySelector('.ads'),
        hide = (-ads.offsetHeight) + 'px';

    hideAds(ads, hide);
    ads.addEventListener('click', function (evt) {
        var target = evt.target;

        setMarginTop(target)
        hideAds(target, hide);
    }, false);
}, false);

在 jsFiddle 上

- Xotic750

Answer 2

这个版本没有在广告真正出现之前延迟2000毫秒。

window.onload = function () {
    var ads = document.querySelector(".ads");

    function hideAds() {
        setTimeout(hide, 2000);
    }

    function hide() {
        ads.style.marginTop = (-ads.offsetHeight) + "px";
    }

    function reveal() {
        ads.style.marginTop = "";
        hideAds();
    }

    ads.addEventListener("click", reveal, true);

    hideAds();
}

- Stevan Faddy Jr.