jQuery v1.10.1





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

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

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

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

Это сообщение отредактировал(а) Arantir - 22.7.2013, 16:01

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




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


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

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

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

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

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

Это сообщение отредактировал(а) Arantir - 22.7.2013, 16:30

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


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


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

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

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

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


Это сообщение отредактировал(а) Arantir - 22.7.2013, 18:06

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

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

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