javascript - Is there any unclick event in jquery? - Stack Overflow

admin管理员组

文章数量:1406453

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

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

• javascript
• jquery

Share Follow asked Dec 17, 2012 at 14:47 dramaseadramasea 3,5021717 gold badges5353 silver badges7777 bronze badges 5

• unclick = click outside of a specific element after a click into it? – John Dvorak Commented Dec 17, 2012 at 14:49
• Yes, it's called off(), but that's not what you are looking for, you're looking for a simple toggle function (jQuery's toggle is deprecated btw) on the document, checking the target etc. There must be at least thousands of duplicates of this ? – adeneo Commented Dec 17, 2012 at 14:49
• There's no such event but you could capture clicks to the document and add some logic. – John Dvorak Commented Dec 17, 2012 at 14:49
• @Jan Dvorak If I capture click to the document it also affect my div, because my div is inside my document – dramasea Commented Dec 17, 2012 at 14:51
• you want to color the background of your div? – Swarne27 Commented Dec 17, 2012 at 15:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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./oyunin/1/edit

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

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.

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>

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}

本文标签： javascriptIs there any unclick event in jqueryStack Overflow