Question

4

Javascript Detect click event outside of div

rated 0 times [ 8] [ 4] / answers: 1 / hits: 70435 / 11 Years ago, thu, september 19, 2013, 12:00:00

I have a div with id=content-area, when a user clicks outside of this div, I would like to alert them to the fact that they clicked outside of it. How would I use JavaScript to solve this issue?

<div id = outer-container>

   <div id = content-area>

      Display Conents 

   </div>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jeremiahianx

Add To Favorites

Follow

Total Points: 629

Total Questions: 106

Total Answers: 112

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

jeremiahianx questions

1 Next.js and Jest: SyntaxError: Cannot use import statement outside a module

Sun, Jan 30, 22, 00:00, 2 Years ago

1 Codehs Inventory: What am I doing wrong in this code?

Mon, Feb 1, 21, 00:00, 3 Years ago

1 MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017

Sun, Jan 10, 21, 00:00, 3 Years ago

1 Intl.NumberFormat doesn't convert to pt-BR locale

Fri, Jan 31, 20, 00:00, 4 Years ago

1 How to initialize Microsoft Monaco editor in a browser using simple JavaScript or jQuery

Tue, Jul 16, 19, 00:00, 5 Years ago

View All

answered 11 Years ago kylie · Accepted Answer

In pure Javascript

Check out this fiddle and see if that's what you're after!

document.getElementById('outer-container').onclick = function(e) {

    if(e.target != document.getElementById('content-area')) {

        document.getElementById('content-area').innerHTML = 'You clicked outside.';          

    } else {

        document.getElementById('content-area').innerHTML = 'Display Contents';   

    }

}

http://jsfiddle.net/DUhP6/2/