Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jquery mouseover почему для всех дочерних устан-ся

Автор: zammar 22.7.2013, 15:41

jQuery v1.10.1

Код


$('#mini_basket').on('mouseover', function(){

        console.log('11');

});

Код


<div id="mini_basket">
<table>
.....
</table>
</div >

Событие срабатывает и для дива и для таблицы и для всех вложенных элементов? Почему не пойму. Подскажите пожалуйста.

Автор: Arantir 22.7.2013, 15:59

Может потому что все, что внутри mini_basket - это в том числе он сам?

События по умолчанию всплывают по всему дереву элементов.
К примеру, mousever на тег html будет работать в любом месте страницы, чтобы там ни было.

Причем, это не причуды jQuery, а свойства самого JS.

Автор: zammar 22.7.2013, 16:08

Цитата

События по умолчанию всплывают по всему дереву элементов.

Всплывают да, но я ведь не назначаю на них события. Я ведь назначаю только на их родителя. Почему события "всплывает" на дочерние элементы?

Цитата

К примеру, mousever на тег html будет работать в любом месте страницы, чтобы там ни было.

Или я что-то не понимаю или какая разница тогда между onMouseMove и onMouseOver?

Ну ладно, а если я хочу чтобы событие происходило ТОЛЬКО при наведение на <div id="mini_basket">
и не происходило в любых других случаях?

Как это сделать тогда

Автор: Arantir 22.7.2013, 16:29

Цитата(zammar @ 22.7.2013, 15:08

)

Почему события "всплывает" на дочерние элементы?

Да не всплывает оно на дочерние элементы.
Он из дочерних элементов всплывает вверх, на родителей, на родителей родителей и так далее. И вот как раз на родителе, на которы Вы его назначили, оно потом и возникает.
Почему? Потому что логично. Потому что страницы плоские. Чистое 2D.
Когда Вы наводите курсор на квадратик, то с вашей точки зрения Вы наводите его и на все другое, что могло оказаться под курсором.
Есть, конечно, тонкости вроде абсолютного позиционирования, которые немного искажают объяснение. Но ивенты всплывают по структуре из исходного кода страницы, а не по визуальной структуре.

Цитата(zammar @ 22.7.2013, 15:08

)

Или я что-то не понимаю или какая разница тогда между onMouseMove и onMouseOver?

onMouseOver, если так можно выразится, это самый первый onMouseMove на элементе.
onMouseMove возникает при передвижении курсора хотя бы на пиксель, когда курсор на элементе. Самое первое попадание курсора на элемент - это onMouseOver.

Цитата(zammar @ 22.7.2013, 15:08

)

Ну ладно, а если я хочу чтобы событие происходило ТОЛЬКО при наведение на <div id="mini_basket">

Есть функция stopPropagation() у объекта event, который, обычно, передается первым аргументов в функцию-обработчик.
stopPropagation() останавливает дальнейшее всплывание ивента.
Можно просто поставить stopPropagation() дочерним элементам.

Код


$('#mini_basket').on('mouseover', function(){
// mini_basket event
});
$('#mini_basket > *').on('mouseover', function(event){
// childs event
event.stopPropagation();
});

Таким образом всплывание будет прекращаться на непосредственных дочерних элементах mini_basket.
Однако надо быть аккуратным. Например, после такого mouseover на body не будет работать внутри дочерних к mini_basket элементов.

Автор: zammar 22.7.2013, 16:50

Да, надо подучить эти события.

Но теперь такая фигня.
Думаю, но не въезжаю почему так.

Срабатывает mouseover при наведении. И что для меня странно это же событие mouseover срабатывает когда я уношу курсор с дива.
Это по идее onmouseout же?

Автор: Arantir 22.7.2013, 17:48

Потому что переход от дочернего к mini_basket - это еще один mouseover.
mouseover будет снова и снова возникать для родителя при каждом его возникновении на дочерних элементах.
stopPropagation() остановит ивент от дочернего. Но переход от дочернего к самому mini_basket по прежнему считается за mouseover.

Для наглядности http://jsfiddle.net/pgzdF/1/

И вообще в объекте event есть очень много чего полезного. По свойству target можно определить, откуда именно событие началось. И, например, поставить условие по id или по имени класса (сделать return при неподходящем).
stopPropagation не единственный способ, но более универсальный. В целом зависит от обстоятельств и желаемого результата.

Автор: Amphiluke 22.7.2013, 18:21

Вместо использования .stopPropagation() предпочтительнее просто применять события http://api.jquery.com/mouseenter/ и http://api.jquery.com/mouseleave/, которые избавлены от нежелательного эффекта срабатываеия на вложенных элементах.

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com//object-id51ed289e6ccc19d315000003#findElement_E7045_51ed4df86ccc194d43000678_0

Автор: zammar 22.7.2013, 19:13

Спасибо, всем!