JQuery: нажмите везде, но какой-то элемент

У меня есть некоторые элементы, которые я могу выбрать с помощью функции .click(), и они стали выделены. Есть меню над ними с некоторыми действиями. Я хочу отменить выделение, когда я нажимаю любой элемент, но не меню.

Состав:

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

Исполняемый пример

$().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>

Ответ 1

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

Альтернативным решением было бы вызвать stopPropagation() в конце обработчика кликов #menu и обработчиков кликов элементов. Таким образом, если событие клика пузырится на объект документа, вы знаете, что ни меню, ни элементы не были нажаты, и вы можете спокойно отменить выделение:

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

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

$(document).click(function() {
    // cancel highlighting
});

Ответ 2

Альтернативой написанию собственного делегированного обработчика для этого является использование плагина Бена Алманса "внешние события" для достижения этого. В значительной степени то же самое, что упоминал Šime Vidas, но эй - выбор - это хорошо!

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

Итак, что-то вроде этого

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

Ответ 3

Вы должны обработать событие click на body, а затем проверить $.contains($('#menu'), e.target).

Ответ 4

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

Не знаю, будет ли это работать, я не на своем компьютере...

Ответ 5

.closest будет распространяться и проверять, является ли один из родителей незащищенным элементом.

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