Detect click outside an element using JavaScript

Question

I have some list items and each contains a small box next to it. Upon clicking on the box, some info is shown. I want to hide the box if a click is outside the box. But i do not know exactly how to do it. There are already some posts similar to this question but all of them are using jQuery but I have to get this done using pure JavaScript

I tried to do following way: http://jsfiddle.net/kn8hw4tf/1/

The quickest solution is to add an even listener to body and hide the box on click. — Jamie Dixon
– Jamie Dixon, Commented Oct 21, 2014 at 8:04
@ManjunathSiddappa: It is not supposed to. The OP has received a warning by the editor that jsfiddle links are not allowed unless accompanied by some code in the question, and he's trying to wriggle around the requirement. — Amadan
– Amadan, Commented Oct 21, 2014 at 8:11
@user596502: And instead of pasting some code into your question as the rules say you should, you instead mark a random piece of text as code to avoid the warning? Please do not do so in the future; as a new user you can be forgiven not to know the rules, but this is obviously a case of being told the rules and then going out of your way to disobey them. — Amadan
– Amadan, Commented Oct 21, 2014 at 8:57

Amadan · Accepted Answer · 2014-10-21 08:55:29Z

2

Listen for clicks anywhere on document, and react to them. Listen for clicks on the box, and invoke event.stopPropagation() so they don't hit the listener on document.

document.getElementById('test_id').addEventListener('click', function getDetails(evt) {
    var id = this.getAttribute('id');
    alert("Clicked on " + id);
    evt.stopPropagation();
});

document.addEventListener("click", function (e) {
    alert("Clicked outside");
});

edited Oct 21, 2014 at 8:55

answered Oct 21, 2014 at 8:05

Amadan

200k23 gold badges252 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user596502 Over a year ago

is there any example that i can look forward to or can you please elaborate a bit more. Thank you

Amadan Over a year ago

Sorry, but your fiddle has so many errors and irrelevant bits that I couldn't understand what you were trying to do exactly. A minimal example demonstrating the concept is here.

Collectives™ on Stack Overflow

Detect click outside an element using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related