javascript - Is there any unclick event in jquery?

Question

I want to style my div using jquery, i want to make it when i click the background become blue, when i unclick(i clicked on other part other than div in my page) the background become red. Sorry for my bad english

Answer 1

With a click handler on document you can capture all the click events, and if the click is not on your div, you can revert to red

$('#yourdiv').click(function() {
   $(this).css('background-color', 'blue');
});

$(document).click(function(e) {
   if(!$(e.target).is('#yourdiv'))
      $('#yourdiv').css('background-color', 'red');
});

See example: http://jsbin.com/oyunin/1/edit

Answer 2

Im not sure about performace, but you can do something like:

    $("*").not("your element selector").on("click",function(){
         //other elements click
      });

a good practice will be doing this:

$("*","some container").not......

Answer 3

The way I solved it in my site was adding a click event to the div in question, and another click event to the document in general. The method stopImmediatePropagation() makes it work as expected:

Here's a jsFiddle with a working example.

HTML:

<div class="colored"></div>

JQUERY:

$(document).click(function(e){
    $(".active").removeClass("active");
});

$(".colored").live("click",function(e){
    $(this).addClass("active");
    e.stopImmediatePropagation();
});

CSS:

.colored{background:red}
.colored.active{background:blue}

Answer 4

if you want to change the div when you click on another div, you can add a click event on the other div, or perhaps you want to add the click event to the entire body of the document so that if a click event is not captured and stopped by another listener, it will go through to the body's event listener.

Answer 5

Try this,

Jquery Code:

$(document).mouseup(function (e){
    var wrapDiv = $(".wrapper");
    if(wrapDiv.has(e.target).length === 0){
        wrapDiv.css('background-color','red');
    }
    $('.wrapper').click(function(event){
       $('.wrapper').css('background-color','blue')
    });
});

CSS code:

<style type="text/css">
.wrapper{
    background-color:#0FF;
    width:200px;
    height:200px;
    }
</style>

Html code:

<div class="wrapper">
</div>