javascript - 单击除一个元素外的 HTML，不使用 jQuery

Question

我向我们展示了代码：

(function (){
  var element = document.getElementById('bar'), hideElement = document.getElementById('foo'),
  var html = document.getElementsByTagName('html')[0];
  tool.onclick = function() {
    hideElement.style.display = 'block';
    html.onclick = function() {
      hideElement.style.display = 'none';
    }
  }
})();

这段代码工作正常，但是，单击 html 后，我无法重新打开隐藏的元素。

我想单击 html 元素并将 display:none 赋予 hideElement，然后单击元素 id="bar"，赋予隐藏元素 display:block，但不是单击元素 foo，而是单击 html 元素。我可以做什么？

哦，我需要没有 JQUERY 的帮助，谢谢 :)

编辑：类似的东西：点击正文，除了一些其他标签不起作用，但没有 JQuery，

Answer 1

我不确定它会回答你的问题，但这里是：如何处理身体上的事件，除了一个元素：

document.documentElement.onclick = function(e) {
    var evt = e || window.event, // IE...
        target = evt.target || evt.srcElement // IE again...
    // There, "target" is the element clicked. See where I'm going?
    if (target.id !== "foo") {
        // Do w/e you want if the page was clicked, except for "foo"
    }
}

这就是“事件冒泡”的概念。您可以一次收听一个元素及其所有子元素，并获取代码中指定的目标。

Answer 2

首先，您似乎没有定义tool我能看到的任何地方。

其次，你忘记.style了hideElement.display（应该是hideElement.style.display）。

第三，document.getElementsByTagName('html')[0]是多余的。改用就好document.documentElement了。

Answer 3

改变

html.onclick = function() {
  hideElement.display = 'none';
}

到

html.onclick = function() {
  hideElement.style.display = 'none';
}