Run Javascript code on click of anywhere on the page (except on click of certain divs)

Question

I have this piece of Javascript code:

$('#catDIV').on('click',function(){

    $("#dogDIV").fadeOut(500, function() {

            makeCat();

        }).fadeIn(500);
});

This fades out the div “dogDIV”, runs the function “makeCat();” and fades “dogDIV” back in whenever the div “catDIV” is clicked on.

My question is, is it possible to change this code so that it will run no matter what part of the page is clicked on, and is it possible to specify certain divs that shouldn’t activate the code?

In other words, is it possible to say something like “If any part of the page is clicked, except for these particular divs, then run the code…”.

I’d like the code to run no matter where the user clicks on the page, but I don’t want it to run if the user clicks on the div “catDIV” or another div called “mouseDIV”. I’m not sure if this is possible?

I've seen this similar question: jQuery click anywhere in the page except on 1 div But is it possible to specify multiple divs that shouldn't trigger the code to run?

Any help with this would be really appreciated, thank you in advance!

the link you provided has examples that will work with more than one element. — tells, Oct 08 '15 at 02:00
I recommend you look up how events bubble/propagate in Javascript. This is the mechanism that makes all the answers provided work. If you understand the general principle, it will serve you well in other related problems in the future. — GregL, Oct 08 '15 at 06:12

score 2 · Accepted Answer · answered Oct 08 '15 at 01:59

Handle click on document, #catDIV and #mouseDIV. Do nothing on click on the latter two. The click on any other element will bubble up to the document's click handler.

    $(document).click(function(evt) {
      alert("clicked anywhere except catDIV and mouseDIV");
    });
    $("#catDIV, #mouseDIV").click(function(evt) {
      evt.stopPropagation();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="catDIV">catDIV</div>
<div id="cowDIV">cowDIV</div>
<div id="mouseDIV">mouseDIV</div>

score 2 · Answer 2 · answered Oct 08 '15 at 02:00

there are several ways you could do that, the simplest would be to use multiple '||' (or) statements if the div id's are fixed in advance.

$('body').click(function(evt) {    
   if (evt.target.id == "example" || evt.target.id == "example2") {
        return;
   }
   $("#dogDIV").fadeOut(500, function() {
        makeCat();
    }).fadeIn(500);
});

Alternatively, you could tag all the divs you don't want to activate the event with a class and check the event handler for the class instead.

EDIT: for the latter, the code would be

if ($(evt.target).attr('class') == 'exampleClass')

Last bit could also be reduced to : `if ($(evt.target).hasClass('exampleClass'))`. — Shikkediel, Oct 08 '15 at 02:56

Spencer Wieczorek · Answer 3 · 2015-10-08T02:07:09.627

Yes you can use document:

$(document).on('click',function(e){
    ...
    // Code Ran
});

And in order to exclulde a certain element you can check with e.toElement or e.target. For example exuding an element with the id "test"

$(document).click(function(e){
    if($(e.toElement).prop("id") == "test"));
        return false;
    // Code Ran
});

Here is an example of that. Such that the console is not logged when the button is clicked, anywhere else on the document it does.

Shikkediel · Answer 4 · 2015-10-08T02:09:33.973

1

You could use event.stopPropagation on the sub elements, making the event not bubble up :

$(window).click(function() {

    // do stuff
});

$('#catDIV, #mouseDIV').click(function(e) {

    e.stopPropagation();
});

edited Oct 08 '15 at 02:09

answered Oct 08 '15 at 02:02

Shikkediel

5,195
16
45
77

score 1 · Answer 5 · answered Oct 08 '15 at 02:06

I suggest add a class to all the elements for which you don't want click to work and exclude click for that class.

Example Snippet:

$(document).on("click", function(e) {
  if ($(e.toElement).hasClass('test')) {
    return false
  }
  alert("hi")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="test">
<input type="text" class="test">
<input type="text">

Run Javascript code on click of anywhere on the page (except on click of certain divs)

5 Answers5