Click HTML except one element, without using jQuery

Question

I show us the code:

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

This piece of code work's fine, but, after clicking html, I can not reopen the hidden element.

I want to click the html element and give display:none to hideElement, then to click the element id="bar", give to the hidden element display:block, but instead of click the element foo, click the html element. What I can do?

Oh, i need help WITHOUT JQUERY, thanks :)

EDIT: something like that : click on body except some other tag not working , but without JQuery,

Is it a typo? `hideElement.display` instead of `hideElement.style.display`? — Florian Margaine, Apr 06 '12 at 23:20

Florian Margaine · Accepted Answer · 2012-04-07T00:18:45.167

3

I'm not sure it's going to answer your question, but here it is: how to handle an event on the body except one element:

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"
    }
}

This is the concept of "event bubbling". You can listen to one element and all its children at once, and get the target as specified in the code up there.

edited Apr 07 '12 at 00:18

answered Apr 06 '12 at 23:33

Florian Margaine

58,730
15
91
116

Glad it suits you. Be careful about cross-browser compatibility though. In a perfect world, `var target = e.target` would be enough. But IE doesn't like `e` passed as an argument (so we use `window.event`), and old versions of FF didn't like `evt.target` (so we use `evt.srcElement`). – Florian Margaine Apr 06 '12 at 23:45
`e.srcElement` should be `evt.srcElement`, and `.srcElement` is an IE property, not FF. Pretty sure FF has always had `.target`. – Apr 07 '12 at 00:05
Oops, typo. My bad about `srcElement`! You're right indeed :) – Florian Margaine Apr 07 '12 at 00:18
I'd recommend adding an if block for the existence of `evt`. I was bitten by this today in Opera. – Apr 09 '12 at 02:41
Could you edit my answer to add it? I don't see where to add this. – Florian Margaine Apr 09 '12 at 06:10

score 0 · Answer 2 · answered Apr 06 '12 at 23:20

First, you don't appear to be defining tool anywhere that I can see.

Second, you forgot .style in hideElement.display (should be hideElement.style.display).

Third, document.getElementsByTagName('html')[0] is redundant. Just use document.documentElement instead.

score 0 · Answer 3 · answered Apr 06 '12 at 23:21

0

Change

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

to

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

answered Apr 06 '12 at 23:21

Elliot Bonneville

51,872
23
96
123

Its only a mistake, but this is not what I need – Apr 06 '12 at 23:23
2

That mistake is enough to break it. There is no such thing as 'only a mistake' in programming. – Elliot Bonneville Apr 06 '12 at 23:23

Click HTML except one element, without using jQuery

3 Answers3