Событие onmouseout в HTML


Содержание

Moving the mouse: mouseover/out, mouseenter/leave

Let’s dive into more details about events that happen when the mouse moves between elements.

Events mouseover/mouseout, relatedTarget

The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves.

These events are special, because they have property relatedTarget . This property complements target . When a mouse leaves one element for another, one of them becomes target , and the other one – relatedTarget .

  • event.target – is the element where the mouse came over.
  • event.relatedTarget – is the element from which the mouse came ( relatedTarget → target ).

For mouseout the reverse:

  • event.target – is the element that the mouse left.
  • event.relatedTarget – is the new under-the-pointer element, that mouse left for ( target → relatedTarget ).

In the example below each face and its features are separate elements. When you move the mouse, you can see mouse events in the text area.

Each event has the information about both target and relatedTarget :

The relatedTarget property can be null .

That’s normal and just means that the mouse came not from another element, but from out of the window. Or that it left the window.

We should keep that possibility in mind when using event.relatedTarget in our code. If we access event.relatedTarget.tagName , then there will be an error.

Skipping elements

The mousemove event triggers when the mouse moves. But that doesn’t mean that every pixel leads to an event.

The browser checks the mouse position from time to time. And if it notices changes then triggers the events.

That means that if the visitor is moving the mouse very fast then some DOM-elements may be skipped:

If the mouse moves very fast from #FROM to #TO elements as painted above, then intermediate

That’s good for performance, because there may be many intermediate elements. We don’t really want to process in and out of each one.

On the other hand, we should keep in mind that the mouse pointer doesn’t “visit” all elements along the way. It can “jump”.

In particular, it’s possible that the pointer jumps right inside the middle of the page from out of the window. In that case relatedTarget is null , because it came from “nowhere”:

You can check it out “live” on a teststand below.

Its HTML has two nested elements: the

Also move the pointer into the child div , and then move it out quickly down through the parent one. If the movement is fast enough, then the parent element is ignored. The mouse will cross the parent element without noticing it.

In case of fast mouse movements, intermediate elements may be ignored, but one thing we know for sure: if the pointer “officially” entered an element ( mouseover event generated), then upon leaving it we always get mouseout .

Mouseout when leaving for a child

An important feature of mouseout – it triggers, when the pointer moves from an element to its descendant, e.g. from #parent to #child in this HTML:

If we’re on #parent and then move the pointer deeper into #child , but we get mouseout on #parent !

That may seem strange, but can be easily explained.

According to the browser logic, the mouse cursor may be only over a single element at any time – the most nested one and top by z-index.

Илон Маск рекомендует:  Поисковые системы


So if it goes to another element (even a descendant), then it leaves the previous one.

Please note another important detail of event processing.

The mouseover event on a descendant bubbles up. So, if #parent has mouseover handler, it triggers:

You can see that very well in the example below:

If you move the mouse from #parent to #child , you see two events on #parent :

  1. mouseout [target: parent] (left the parent), then
  2. mouseover [target: child] (came to the child, bubbled).

As shown, when the pointer moves from #parent element to #child , two handlers trigger on the parent element: mouseout and mouseover :

If we don’t examine event.target inside the handlers, then it may seem that the mouse pointer left #parent element, and then immediately came back over it.

But that’s not the case! The pointer is still over the parent, it just moved deeper into the child element.

If there are some actions upon leaving the parent element, e.g. an animation runs in parent.onmouseout , we usually don’t want it when the pointer just goes deeper into #parent .

To avoid it, we can check relatedTarget in the handler and, if the mouse is still inside the element, then ignore such event.

Alternatively we can use other events: mouseenter и mouseleave , that we’ll be covering now, as they don’t have such problems.

Events mouseenter and mouseleave

Events mouseenter/mouseleave are like mouseover/mouseout . They trigger when the mouse pointer enters/leaves the element.

But there are two important differences:

  1. Transitions inside the element, to/from descendants, are not counted.
  2. Events mouseenter/mouseleave do not bubble.

These events are extremely simple.

When the pointer enters an element – mouseenter triggers. The exact location of the pointer inside the element or its descendants doesn’t matter.

When the pointer leaves an element – mouseleave triggers.

This example is similar to the one above, but now the top element has mouseenter/mouseleave instead of mouseover/mouseout .

As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignores

[js] Обработка событий onmouseover и onmouseout

Скорее всего ты не отслеживаешь, от какого элемента происходит событие.

>сначала происходит событие mouseover, а вслед за ним сразу mouseout и список исчезает.

Потому что обрабатываются у тебя, вероятно, события не только list, но и всех его элементов (elem1 и elem2).

Читай внимательно спеку:

Re: [js] Обработка событий onmouseover и onmouseout

> Скорее всего ты не отслеживаешь, от какого элемента происходит событие.

Не, про это я в курсе и собия отслеживаю только с дива list, а события его элементов игнорятся.


Вот в таком порядке происходят события (лог из функиций-обработчиков):

city_button
DIV city_list
over
DIV city_list
out

Сначала переходим на кнопку (button), после курсор передвигается на list и поочередно происходят события mouseover и сразу же mouseout!

Re: [js] Обработка событий onmouseover и onmouseout

Немного не понял по какой причине был использован js — тут все настолько просто, что это можно реализовать через CSS — вот например способ http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp

Re: [js] Обработка событий onmouseover и onmouseout

спасибо, тов. Orlangoor!

Что-то не посмотрел по сторонам и сразу начал лепить js!

Сейчас буду пробовать!

Re: [js] Обработка событий onmouseover и onmouseout

События мыши: mouseover/out, mouseenter/leave

События мыши: mouseover/out, mouseenter/leave

Здравствуйте! В этом уроке мы продолжим разбираться с событиями мыши и рассмотрим события, которые возникают при движении мыши mouseover, mouseenter.

Эти события возбуждаются, когда пользователь двигает мышью или наводит мышь (mouseover), уводит (mouseout) от элемента на веб-странице.

События mouseover/mouseout

Событие mouseover инициируется, когда мышь появляется над элементом, а mouseout – когда соотвественно уходит из него.

При этом вы можете узнать, с какого именно элемента пришла (или на какой) мышь, используя такое дополнительное свойство объекта события как relatedTarget.

Например, в обработчике события mouseover:

  • event.target – это элемент, на который пришла мышь, то есть на котором собственно и возникло событие.
  • event.relatedTarget – элемент, с которого пришла мышь.

А вот для mouseout всё будет наоборот:

  • event.target – элемент, с которого ушла мышь, то есть на котором и возникло событие.
  • event.relatedTarget – элемент, на который потом перешла мышь.
Илон Маск рекомендует:  Что такое код swfmovie >setdimension

relatedTarget может быть null

Свойство relatedTarget может содержать null.

В принципе это вполне нормально и будет означать, что мышь пришла не с элемента, а из-за пределов окна (или ушла за окно). Вы обязательно должны иметь в виду такую особенность, когда пишете код, который и обращается к свойствам event.relatedTarget.

Частота событий

Событие mousemove срабатывает при передвижении мыши. Но это вовсе не значит, что каждый пиксель экрана порождает отдельное событие!

События mousemove и mouseover/mouseout будут срабатывать так часто, насколько это будет позволять внутренняя система взаимодействия с мышью браузера.

Из этого можно сделать вывод, что если посетитель будет двигать мышью быстро, то соответственно элементы веб-страницы, через которые мышь и проходит на большой скорости, могут быть пропущены.

На практике это бывает полезно, потому что вот таких промежуточных элементов может быть много, и если обрабатывать наведение и отведение с каждого, будут дополнительные затраты.

С другой стороны, вы должны это четко понимать и не рассчитывать на то, что мышь будет аккуратно проходить с одного элемента на другой и так далее. Нет, она естественно «прыгает».


В частности, возможна такая ситуация, когда курсор наводится в середину страницы, и при этом соответственно relatedTarget=null, потому что он, курсор, пришел из другого окна.

Важно иметь в виду эту особенность событий, чтобы не написать код, который рассчитан на последовательный проход над элементами. В остальном это вполне удобно.

События mouseenter и mouseleave

События mouseenter/mouseleave очень похожи на mouseover/mouseout. Они тоже срабатывают, когда курсор заходит на элемент и уходит с него, но с 2 отличиями.

  1. Не будут учитываются переходы внутри элемента.
  2. События mouseenter/mouseleave не всплывают. (О всплытии я писал здесь).

Эти события более интуитивно понятны.

Когда курсор заходит на элемент – срабатывает событие mouseenter, а затем – неважно, куда он внутри него переходит, mouseleave сработает, когда курсор будет за пределами элемента

Делегирование

События mouseenter/leave конечно же более наглядны и понятны, но они не всплывают к сожалению, а значит с ними нельзя использовать и делегирование событий.

Например, что нам нужно обработать вход/выход мыши для ячеек таблицы. А в таблице может быть таких ячеек тысяча.

Очевидное решение – это поставить обработчик на верхний элемент

и ловить все события на нём. Но события mouseenter/leave не всплывают, а следовательно они срабатывают именно на том элементе, на котором и стоит обработчик и только на нём родимом.

Если обработчики mouseenter/leave стоят на

, то они конечно сработают при входе-выходе из таблицы, но вот получить из них какую-либо информацию о переходах по ячейкам будет невозможно.

Но это нам не помеха – воспользуемся mouseover/mouseout.

Вот вариант обработчиков выглядит так:

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

на другую.

Нужно будет фильтровать события.

Один из вариантов:

  • Запоминать текущий подсвеченный
в переменной.
  • При mouseover проверять, остались ли вы внутри того же
  • , если да – то игнорировать.
  • При mouseout проверять, если мы ушли с текущего
  • , а не перешли внутрь него, то конечно игнорировать.

    Итоги

    У mouseover, mousemove, mouseout есть такие особенности:

    • При очень быстром движении мыши события mouseover, mousemove, mouseout могут пропускать элементы.
    • События mouseover и mouseout – единственные, у которых есть вторая цель: relatedTarget.
    • События mouseover/mouseout подразумевают, что курсор находится над одним, самым глубоким элементом. Они срабатывают при переходе с родительского элемента на дочерний.

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

    Задачи

    Поведение еще одна подсказака

    Вам требуется написать JS-код, который будет показывать всплывающую подсказку над элементом, если у него имеется атрибут data-tooltip.

    Подсказка при замедлении над элементом

    Вам нужно написать функцию, которая будет показывать подсказку при наведении на элемент, но не при быстром проходе над ним.

    То есть, если пользователь навёл курсор мыши на элемент и почти остановился – подсказку надо показать, а если быстро провёл над ним, то не надо.


    Технически – можно измерять скорость движения мыши над элементом, если она маленькая, то считаем, что это «наведение на элемент» (показать подсказку), если большая – «быстрый проход мимо элемента» (не показывать).

    Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

    .mouseout()

    Содержание:

    .mouseout( handler ) Возвращает: jQuery

    Описание: Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.

    Добавлен в версии: 1.0 .mouseout( handler )

    Добавлен в версии: 1.4.3 .mouseout( [eventData ], handler )

    Добавлен в версии: 1.0 .mouseout()

    This method is a shortcut for .on( «mouseout», handler ) in the first two variation, and .trigger( «mouseout» ) in the third.

    The mouseout event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

    For example, consider the HTML:

    The event handler can be bound to any element:

    Now when the mouse pointer moves out of the Outer

    After this code executes, clicks on Trigger the handler will also append the message.

    This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer . This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.

    Событие onmouseout

    Событие onmouseout возникает, когда пользователь уводит курсор мыши за пределы элемента.

    Применимо к:

    Поддержка браузерами

    Действия, вызывающие данное событие

    • Уход курсора за пределы элемента.

    Пример

    Заметки

    Вызывается однократно при уходе курсора за пределы элемента.

    Если необходимо, чтобы действие происходило при наведении курсора на элемент, используем событие onmouseover.

    При перемещении курсора в пределах данного элемента многократно происходит событие onmousemove.

    Element: mouseout event

    On this Page


    The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element.

    Bubbles Yes
    Cancelable Yes
    Interface MouseEvent
    Event handler property onmouseout

    Examples

    The following examples show the use of the mouseout event.

    mouseout and mouseleave

    When you try this out, you’ll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying

      .

    Как правильно сделать событие onmouseout для UL?

    Проверьте этот простой код:

    Событие onmouseout запускается, даже если я внутри UL , перемещая LI с помощью мыши.

    Это с FireFox, как я могу сделать это правильно, поэтому событие запускается, когда я действительно оставляю UL ?

    ИЗМЕНИТЬ

    Событие мыши вызывается каждый раз, когда вы оставляете один li и переходите к следующему, но mouseleave запускается только после того, как вы оставите весь div

    Событие наведение указателя мыши — Свойства onmouseover и onmouseout

    Количество просмотров : 953

    Свойства onmouseover и onmouseout соответствуют событию наведения указателя мыши на объект (элемент веб-страницы) и событию выхода указателя за границы объекта .

    Далее рассмотрим практический пример.

    Для этого обратимся к предыдущему уроку с тремя полупрозрачными изображениями, где при помощи события щелчок мышью (свойство onclick) и метода setTimeout мы добились того, что при щелчке мышью на любом из 3-х изображений, оно из полупрозрачного состояния переходило в полноценное, а через заданный промежуток времени снова становилось размытым.

    Здесь будет немного иное условие:

    Итак, имеем три размытых изображения.

    Используя события наведение указателя мыши на объект (свойство onmouseover) и выхода указателя за границы объекта (свойство onmouseout), реализовать задачу:

    — при наведении указателя на любое из трех изображений, оно теряет размытость, и становится полноценным;

    — при выходе указателя за границы картинки — оно снова становиться полупрозрачным.

    onmouseout

    07.02.2011, 14:14

    CSS Псевдокласс похожий на onmouseout в js
    В CSS есть псевдоклас :hover который срабатывает при наведении на него мыши, и у меня там записано.

    Событие onmouseout
    Добрый вечер, подскажите пожалуйста, почему срабатывает событие при перемещении курсора внутри.

    Onmouseout onmouseover
    делаю обычную замену картинки при наведении, навел звезда желтая убрал серая к примеру

    Событие onmouseout
    Есть два div, один вложен в другого:

    Не работает обрабоотка onmouseout
    Доброго времени суток. Неоходимо сделать, чтобы картинка менялась при наведении, и возвращалась.

    JavaScript — события onmouseover и onmouseout в коде php не работают

    Я хочу повторить HTML-код с php, но 2 события тега div не работают, onmouseover и onmouseout. Я пишу код, как показано ниже:

    Я вынужден повторить этот HTML-код с PHP. Я не могу использовать другие способы.
    Как я могу решить это?

    Решение

    Определенный вами javascript неверен, поскольку сам цвет должен быть строковым литералом. Смотрите следующий пример для правильного использования:

    Илон Маск рекомендует:  Что такое код setgraphmode
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL