javascript addEventListener by querySelector 不起作用答案

【问题标题】：javascript addEventListener by querySelector not workjavascript addEventListener by querySelector 不起作用
【发布时间】：2011-06-20 19:57:33
【问题描述】：

嗨，这是我的 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”倒数第二行之外，一切正常。是什么原因？我是不是在这里做错了什么..？

我需要通过点击添加的广告类 div 来调用我的显示功能。

有人帮帮我吗？

【问题讨论】：

它对我来说很好用。也许您想将侦听器添加到父级，因为 .ads 可能是隐藏的。
@patrick 是的，帕特里克。你没看到代码的格式有多漂亮吗？你在说什么？ :)
patrick dw 所说的是正确的。紧急，我无法格式化代码。对不起。
@Šime Vidas：是的，我在想什么？ ;o)
@3gwebtrain：如果你说你不知道怎么做，那么编辑区域顶部有一些按钮。您只需选择您的代码并单击 代码示例 按钮。它看起来像 { }。

标签： javascript debugging addeventlistener selectors-api

【解决方案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

【讨论】：