CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aamu
Aamu

Reputation: 3601

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

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

Upvotes: 13

Views: 4265

Answers (7)

Sphinxxx
Sphinxxx

Reputation: 13017

Based on Akshay's answer:

$('body').click(function (e) {
    var clicked = $(e.target);

    //See if the clicked element is (or is inside) a .block:
    var clickedBlock = clicked.closest('.block');
    if (clickedBlock.length) {
        clickedBlock.css('background', 'red');
    }

    //Remove the overridden background from other blocks:
    var allBlocks = $('.block');
    allBlocks.not(clickedBlock).css('background', '');
});

JSFiddle: http://jsfiddle.net/ftq8a6ex/5/

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Add a CSS class that represents the styles and selected state of the currently chosen block:

.block.selected {
  background: red;
}

Within the click handler, remove that class from the block that's selected. (If no blocks are selected, removeClass() won't do anything.) Then add the class to the newly-clicked block:

$('.block').click(function() {
  $('.block.selected').removeClass('selected');
  $(this).addClass('selected');
});

Fiddle 1

Update

How do I know whether it is clicked inside the block or other .block

Use hasClass() to determine if you've clicked the same block twice:

$('.block').click(function() {
  if($(this).hasClass('selected')) {
    // do something here
  }

  $('.block.selected').removeClass('selected');
  $(this).addClass('selected');
});

Fiddle 2

Upvotes: 2

C. van Dorsten
C. van Dorsten

Reputation: 152

See the comments in the working example code below.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
            .block {
                background: gray;
                width: 100px;
                height: 100px;
                float: left;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="block" id="block1"></div>
        <div class="block" id="block2"></div>
        <div class="block" id="block3"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                /*
                Solution 1:
                This gathers all elements with the class 'block' and defines a click event on it.
                In the click event all elements with class 'block' are walked through. If an element
                has the same id as the current element's id, than do one thing else do another thing.
                In this example background color en content of the three divs are changed
                */
                $('.block').click(function(i) {
                    /*
                    Notice the usage of $(this) and this in the code below. $(this) Is the
                    jquery element while 'this' is the DOM element.
                    */
                    var block = $(this);
                    $(".block").each(function(){
                        if (this.id == block.attr("id")) {
                            this.innerHTML = ("My id is " + this.id);
                            this.style.background = "red";
                        } else {
                            this.innerHTML = "";
                            this.style.background = "gray";
                        }
                    })
                });
                /*
                Solution 2:
                For each element you want actions on, define a separate click event.
                */
                $('#block1').click(function(i) {
                  alert("You clicked me?");
                });
                $('#block2').click(function(i) {
                  alert("Why did you click me?");
                });
                $('#block3').click(function(i) {
                  alert("Hi there, what's new?");
                });
            });
        </script>
    </body>
</html>

Upvotes: 1

maioman
maioman

Reputation: 18734

doing it in JS would be something like

var globalRef;
var inside = document.querySelectorAll('.inside');

document.querySelector('.block').addEventListener('click', function (e) {

    if (globalRef != undefined) {
        globalRef.style.background = 'none'
    }

    globalRef = e.target;
    e.target.style.background = 'red'
}, false);
.block {
    width:200px;
    height:200px;
    background:#ccc;
}
.inside {
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid green;
    box-sizing:border-box;
    float:left
}
<div class="block">
    <div class='inside'></div>
    <div class='inside'></div>
    <div class='inside'></div>
    <div class='inside'></div>
</div>

Upvotes: 1

palaѕн
palaѕн

Reputation: 73886

You can try something like this:-

$(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
    $('html:not(.block)').click(function () {
        //your logic here
    });
});

FIDDLE DEMO

Upvotes: 5

Ankit Agarwal
Ankit Agarwal

Reputation: 1348

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>

Upvotes: 14

Akshay
Akshay

Reputation: 14348

You can bind the click event on the body and check if #a was clicked using e.target function 

$('div').click(function () {
    $(this).css('background', 'red')
})
$('body').click(function (e) {
    if ($(e.target).is($("#a"))) {
        
    } else {
        $('#a').css('background','tomato')
    }
})
div {
    width:100px;
    height:100px;
    background:tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="a"></div>

Upvotes: 4

Related Questions