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!

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!

• javascript
• html

• the link you provided has examples that will work with more than one element. – tells Commented Oct 8, 2015 at 2:00
• provide a fiddle if possible – J Santosh Commented Oct 8, 2015 at 2:04
• 1 I remend 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 Commented Oct 8, 2015 at 6:12

5 Answers 5

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./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>

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')

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="test">
<input type="text" class="test">
<input type="text">

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.

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