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

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

14 голосов
/ 19 марта 2011

У меня есть некоторые элементы, которые я могу выбрать с помощью функции .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>

Jsfiddle

Я пытался связать $("body *").not("#menu").click(...);, но когда я нажимаю на #menu, то событие onclick тела также сработало, потому что #menu - это дети тела.

Ответы [ 5 ]

35 голосов
/ 19 марта 2011 
$(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 голосов
/ 19 марта 2011

Альтернативой написанию собственного делегированного обработчика для этого является использование плагина Ben Almans «внешние события» для достижения этой цели.Делает в значительной степени то же самое, что упоминал Шиме Видас, но эй - выбор - это хорошо!

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

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

$('#menu').bind("clickoutside", function(){
    // cancel highlighting
})
1 голос
/ 01 января 2018

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

$(document).on('click', '.clickable_parent', function(e){
  if(e.target.closest(".UnClickable_child") === null){
   //do stuff
  }
});
1 голос
/ 19 марта 2011

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

0 голосов
/ 19 марта 2011 
$("body *:not(body #menu)").click()

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...