16

I have some elements which i can select with .click() function and they became highlighted. There is menu above them with some actions. I want to cancel highlight when I click any element but not menu.

Structure:

<body>
    <div id="menu">
    </div>
    <div id="elements">
        /* selectable elements here */
    </div>
</body>

Executable Example

$().ready(function(){
	$("#elements a").click(function(){
  	$(this).css('color', 'red');
  	return false;
  });
  $(document).click(function(e) {
    if ( $(e.target).closest('#menu').length === 0 ) {
        $("#elements a").css('color', 'blue');
    }
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
        <a href="#">Menu 1</a>
        <a href="#">Menu 2</a>
        <a href="#">Menu 3</a>
    </div>
    <div id="elements">
        <a href="#">Element 1</a>
        <a href="#">Element 2</a>
        <a href="#">Element 3</a>
    </div>
    <div>
      Click any element to highlight it. Click anywhere to reset highlighting. Click menu to keep highlighting.
    </div>

Jsfiddle

I tried to bind $("body *").not("#menu").click(...); but when I click on #menu then body's onclick event fired too because #menu is body's children.

2
  • 1
    Would be helpful if you would provide any jsfiddle or exectutable example.
    – Black
    May 29, 2017 at 6:55
  • @Black, here you go jsfiddle.net/3aqgLpp6/2
    – ink
    May 29, 2017 at 11:24

5 Answers 5

41
$(document).click(function(e) {
    if ( $(e.target).closest('#menu').length === 0 ) {
        // cancel highlighting 
    }
});

An alternative solution would be to call stopPropagation() at the end of the #menu click handler and element click handlers. That way, if a click event bubbles to the document object, you know that neither the menu nor the elements were clicked and you can safely cancel the highlighting:

$('#menu').click(function(e) {
    // do stuff
    e.stopPropagation();
});

$('.element').click(function(e) {
    //do stuff
    e.stopPropagation();
});

$(document).click(function() {
    // cancel highlighting
});
1
  • I tried to use $(this) instead $(e.target) and then all parents element onclick fired too.
    – ink
    Mar 19, 2011 at 6:41
4

.closest will propagate and check if one of the parents is the unclickable element.

$(document).on('click', '.clickable_parent', function(e){
  if(e.target.closest(".UnClickable_child") === null){
   //do stuff
  }
});
2

An alternative to writing your own delegated handler for this is to use Ben Almans "outside events" plugin to achieve this. Does pretty much the same thing mentioned by Šime Vidas but hey - choices are a good thing!

http://benalman.com/projects/jquery-outside-events-plugin/

So something like this

$('#menu').bind("clickoutside", function(){
    // cancel highlighting
})
1

You should handle the click event on body, then check whether $.contains($('#menu'), e.target).

0
$("body *:not(body #menu)").click()

Dont know if this will work, I'm not at my computer...

1
  • 1
    Binding click handlers to all elements on the page? Bad idea. Event delegation should be used here. Mar 18, 2011 at 22:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.