Javascript: Click anywhere in body except the one element inside it

I want to be able to click anywhere inside the body except that one specific element. I can’t find out what’s wrong with the code I have done.

When I click on the one specific element .except inside body, I don’t want it to hide but when I click on body it should hide.

HTML

<html>
  <head>
    <title>Click anywhere except that specific element</title>
  </head>
  <body id="wrapper">
    <center>
      <div id="except"></div>
    </center>
  </body>
</html>

JS

var body = document.getElementById('wrapper');
var except = document.getElementById('except');

if(body.addEventListener)
  body.addEventListener("click", function(){bodyClick("yes")}, false);
else
  body.attachEvent("onclick", bodyClick);

function bodyClick(clicked){

  except.addEventListener("click", exceptClick,false);
  function exceptClick(){
    bodyClick("no");
    if(clicked === "yes")
      except.style.display = "none";
  }

  if(clicked === "yes")
    except.style.display = "none";
  else
    except.style.display = "show";

}

Any help is appreciated. Forgive me for the incorrect formatting (it’s my first post here). Thank You!

Answer

You need to stopPropagation to the outer element.

Here’s a simple illustration: http://jsfiddle.net/5mhqrhwk/3/

var body = document.getElementById('wrapper');
var except = document.getElementById('except');

body.addEventListener("click", function () {
    alert("wrapper");
}, false);
except.addEventListener("click", function (ev) {
    alert("except");
    ev.stopPropagation(); //this is important! If removed, you'll get both alerts
}, false);

HTML:

<div id="wrapper">
    <center>
        <div id="except"></div>
    </center>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *