Jquery, всплывание событий
 

Привет всем.

Есть такой кусок верстки:

<table id="messages" width="957">
           <tr valign="top">
                       <td width="500">
                                    <div class="confirm-container"></div>
                      </td>
           </tr>
 </table>

Стиль div:

.confirm-container 
{
                                position: absolute;                           
                                width: 174px;
                                height: 78px;
                                border: 1px black solid; 
                                margin-left: 1000px;     
}

.confirm-container находится в стороне относительно всей таблицы, за счет margin-left.

$('#messages tr').mouseenter(function(event){
              alert('1');
 })

Подскажите, пожалуйста, почему при наведении на .confirm-container всплывает событие до #messages tr и срабатывает нем (хотелось бы чтобы событие срабатывало только на #messages tr. ) ??? И как от этого избавиться?

уберите контейнер confirm-container из этой таблицы.

Этот див пихает плагин jq. Мне скорее интересно, почему срабатывают события на элементе, к которому они не имеют отношения, к div. То есть, почему всплытие начинается с него.

ну у функции addEventListener есть третий параметр capture указывающий на то как обрабатывать событие на всплытие или погружение, если стоит false происходит всплытие события от дочернего к родительскому элементу, если стоит true то наоборот. Но данный метод работает не во всех браузерах. Например в тех в которых нет метода addEventListener к ним относиться IE <= 8. По умолчанию во всех библиотеках этот параметр имеет значение false

А как же быть? есть ли кроссбраузерное решение данной проблемы?

Увы пока существуют браузеры не поддерживаемые это решения нет.

Ну как же, можно ведь проверять в обработчике:

if(this.tagName === 'TR') {
}

А вообще кроссбраузерное решение можно реализовать, но придется все управление событиями взять на себя... То-есть сделать промежуточный некий сервис событий. Но это муторная задача и вряд ли претендует на то что бы ее реализовывать. Может пару лет назад она и была бы актуальна, но сейчас уже увы она не считается такой уж необходимой.

devote, FINoM

Спасибо большое! А не могли бы Вы пояснить, почему при навешивании события на tr, высплытие начинается с дочернего элемента. Вот это как-то вообще не пойму.

рекомендуемо к прочтению
http://javascript.ru/tutorial/events

Потому что с родительского идет погружение, то понятно дело что с дочернего всплывает =)

melky, devote

Большое спасибо))

Я правильно понимаю, что единственное решение тут:

$('.confirm-container ').mouseenter(function(event){
             event.stopPropagation(); 
 })

????