Выбор Div, который не содержит класса - jQuery

Question

Я пытался зафиксировать событие, когда пользователь нажимает на раздел моего меню, который не содержит никакого другого типа содержимого / класса.

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

Разметка:

<div id='test'>
    <div class='t1'>
    </div> 
    <div class='t2'>
    </div>
</div>

CSS

#test
{
     background-color: red;
     height: 30px;
     width: 50%;
     position: relative;

}
.t1
{
     float: left;
     width: 45%;
     height: 30px;
     background-color: blue; 
     margin: 0;
     padding: 0;
}

.t2
{
     float: right;
     width: 10%;
     height: 30px;
     background-color: blue; 
     margin: 0;
     padding: 0;
}

Пример:

jsFiddle Пример!

В основном мне было интересно, возможно ли это, просто используя селекторы через jQuery, в отличие от другого метода проверки того, что было нажато, и определения, была ли нажата правильная область.(Оба эти метода приемлемы.)

Answer 1

Сравните this с e.target.Если они совпадают, элемент, в котором обрабатывается событие, будет таким же, как и тот, в котором оно возникло.

$('#test').click(function(e)
{
    if (this === e.target) {
        alert('#test itself clicked');
    } else {
        alert('some child element was clicked');
    }
});

jsFiddle .

Answer 2

Вы можете добавить обработчик для содержащихся элементов:

$('#test *').click(function(e) {
  e.stopPropagation();
});

Это предотвратит всплытие этих событий наверх.

В качестве альтернативы вы можете проверить, еслиЦель события - правильный элемент:

$("#test").click(function(e) {
  if (this === e.target) alert("success!");
});

Обновленная скрипка.