How to detect if mouse is clicked other than $(this) element

Question

I want to apply some styling if mouse is clicked inside an element (here .block). If the element is clicked get that element by $(this) and style it. Now after that, when the user clicks other than the $(this) element, I would like to change it back to default styling. How do I detect if mouse is clicked other than $(this) element.

js script so far :

$( document ).ready(function() {

    // when a block is clicked get that specific block
    $('.block').click(function() {
        var block = $(this);
        block.css('background','red');
    });

    //if clicked other than the block do stuff

});

jsfiddle

Answer 1

The better way to do this is using tabindex andd css :focus selector

.container{
  border:1px solid #333;
  width:200px;
  height:200px;
}
.block{
  background-color: #ccc;
  width:50px;
  float:left;
  height:50px;
  margin:20px;
}
.block:focus{
 background-color: red;
 outline:none
}

<div class="container">
  <div class="block" id="block1" tabindex="1">
    </div>
  <div class="block" id="block2" tabindex="1">
    </div>
  <div class="block" id="block3" tabindex="1">
    </div>
  <div class="block" id="block4" tabindex="1">
    </div>
</div>