Событие мыши на вложенных элементах

[Avenus]

Событие мыши на вложенных элементах (jQuery)

Привет, всем!

На странице:

<div id='area'>
 <div id='el1'><span>Текст</span></div>
 <div id='el2'><span>Текст</span></div>
 ...
 <div id='elN'><span>Текст</span></div> // N блоков
</div>

Объявляю событие для area

$('#area').click(function(e){
 var el=$(e.target);
});

Цель может быть или area, или вложенные div, или span, в зависимости от области клика мыши.

Как отслеживать события только для вложенных div?
1. Если присвоить только вложенным div обработчик событий, то все равно span попадает под клик. К тому же куча обработчиков плохо.
2. Если проверять, является ли цель именно вложенным div, то клик на span не вызовет обработчик, что плохо.
3. Если проверять, к примеру так:

var id=e.target.id;
var f=!id?$(e.target).parent():$(e.target);

То тоже не подходит, т.к. в span также могут быть элементы.

 

[Adelf]

Как вариант: $('#area > div').click(

 

[Splurov]

Так тебе что нужно в итоге? Чтобы при клике на span не срабатывал обработчик?

if ($(this).get(0).tagName.toLowerCase() == 'div') {
  // some actions
}
else {
  e.stopPropagation();
}

?

 

[Avenus]

Splurov, наоборот, нужно чтобы клик срабатывал и на span, и на img (к примеру) внутри span.

Только использовать 1 обработчик, а не вешать на все элементы их. И, опять же, получить id вложенного div, в котором был клик.

Сейчас, если клик будет на span, то e.target.id будет пустым.

-~{}~ 22.01.10 11:27:

Кстати, Splurov, спасибо

 

[Splurov]

var current = $(this).get(0);
while (current.tagName && current.tagName.toLowerCase() != 'div') {
  current = current.parentNode;
  if (! current) {
    break;
  }
}
var div = $(current);
alert(div.attr('id'));

 

[Avenus]

Splurov, получается при клике пробегаемся по всем потомкам вверх до тех пор пока не будет обнаружен div?
Хорошее решение, спасибо.
Я изменю только проверку не просто на div, потому как в потомках еще div может быть.

 

[Splurov]

Да, можно и на jQuery:

var current = $(this);
while (! current.is('div[id^="el"]')) {
  current = $(this).parent();
}
alert(current.attr('id'));

 

[Avenus]

Splurov, это я уже сам написал по твоей подсказке

-~{}~ 22.01.10 12:09:

Только this неправильно использовать

var f=$(e.target);
while(!f.is('div[id]')){
 f=f.parent();
}

 

[Splurov]

Почему не правильно?

 

[Avenus]

Ну ведь для обработчика события

$(this)

получается div с id=area.

 

[Splurov]

Точно, туплю.