2013-10-01 1 views
0

Я пытаюсь решить некоторую дилемму, имея немного проблемы.Напротив .find (someElem), т.е. хотите опустить детей, если e.target для обработчика событий

Итак, я хочу отслеживать все клики на странице и делать только что-то, ЕСЛИ e.target не является дочерним элементом некоторых элементов. Таким образом, у меня есть:

jQuery('body').click(function(e){ 
    // some stuff 
    // do some more stuff 
     if(!(jQuery('#element1, #element2, #element3').find(e.target))){ 
      // do something extra here ONLY if the target is NOT a child 
      // of any of those elements 
     } 

}) 

Это, похоже, не работает. Я пробовал другие вещи, чтобы получить «не найденный» vibe going, ala, .not,!() И т. Д. Не смог. Кажется, игнорирует весь код. Даже когда я делаю просто: просто для проверки:

 // I expressly click outside this area of element1, still captures it. 
    if(jQuery('#element1').find(e.target)){ 
     console.log('in') 
     e.stopPropagation(); 
    // failes 

ответ

4

Есть несколько способов, которыми вы могли бы это поделать. Минимальное изменение будет приложить .length к вашим условно:

if(!jQuery('#element1, #element2, #element3').find(e.target).length) { 
    // do something extra here ONLY if the target is NOT a child 
    // of any of those elements 
} 

Без .length условные всегда будет ложным, поскольку объект JQuery является truthy значения, даже если он не обернуть любой элемент DOM.

Лучшим способом, вероятно, было бы сделать чек назад: вместо того, чтобы разворачиваться от целевых элементов и ходить по всем DOM (что может означать посещение сотен потомков), почему бы просто не ходить родителям цели (что было бы намного меньше)?

if(!$(e.target).parents().filter('#element1, #element2, #element3').length) { 
    // do stuff 
} 

Третий способ будет установить отдельный обработчик щелчка на элементах вы заинтересованы и использовать его, чтобы остановить событие клика от барботирования до <body>:

$('#element1, #element2, #element3').click(function(e){ 
    e.stopPropagation(); 
}); 

Таким образом, вы дону «Мне нужно иметь условное выражение в исходном обработчике, но я бы не стал делать это, потому что он вводит« тонкие »зависимости между обработчиками, которые на первый взгляд выглядят несвязанными.

+0

Это очень медленный способ согласования, по сравнению с проверкой из щелкнули цели обратно вверх по иерархии (то есть с помощью родителей() или аналогичный). –

+0

@TrueBlueAussie: Еще редактирование, я писал именно это :) – Jon

+0

Мне нравится прогулка по маршруту родителей. Просто не пришла ко мне, большое спасибо! –

2

Я думаю, что вы ищете jQuery.parents(selector): Documentation jQuery

$('body').click(function(e) { 
    if (e.target.parents(<selector>).length == 0) { 
    // Not child of selected parent => do something 
    } 
}); 
Смежные вопросы