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
});
7 answers
solution1
14 2015-08-29 08:42:29
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>
solution2
5 2015-08-29 08:40:00
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
});
});
solution3
3 ACCPTED 2015-08-29 08:39:54
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>
solution4
2 2015-08-29 09:45:37
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');
});
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'); });
solution5
1 2015-08-29 09:09:52
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>
solution6
1 2015-08-29 10:03:49
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>
solution7
1 2015-08-29 11:05:57
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.