#си# — Нет элемента Mouse в контексте


Содержание

Определите, на каком элементе указатель мыши находится поверх Javascript

Мне нужна функция, которая сообщает мне, какой элемент находится над курсором мыши.

Итак, например, если пользовательская мышь находится над этим текстовым полем (с id wmd-input ), вызов window.which_element_is_the_mouse_on() будет функционально эквивалентен $(«#wmd-input»)

Там действительно крутая функция под названием document.elementFromPoint , которая делает то, что она звучит.

Нам нужно найти координаты x и y мыши, а затем вызвать их с помощью этих значений:

В новых браузерах вы можете сделать следующее:

Это даст вам NodeList элементов, которые мышь в настоящее время завершена в порядке документа. Последний элемент в NodeList является наиболее конкретным, каждый из которых должен быть родителем, дедушкой и бабушкой и т.д.

Хотя следующий вопрос может не отвечать на вопрос, так как это первый результат поиска в googling (гуглер может не задавать точно такой же вопрос:), надеюсь, что он предоставит некоторый дополнительный ввод.

На самом деле существует два разных подхода к получению списка всех элементов, которые мышь в данный момент (для более новых браузеров, возможно):

«Структурный» подход — восходящее дерево DOM

Как и в ответе дермана, можно вызвать

Однако это предполагает, что только дети наследуют своих предков, что обычно имеет место, но не верно в целом, особенно при работе с SVG, где элемент в разных ветвях дерева DOM может перекрывать друг друга.

«визуальный» подход — на основе «визуального» перекрытия

Этот метод использует document.elementFromPoint(x, y) , чтобы найти самый верхний элемент, временно скрыть его (поскольку мы немедленно его восстанавливаем в том же контексте, браузер фактически не отображает это), а затем найдите второй самый верхний элемент. Выглядит немного взломанным, но он возвращает то, что вы ожидаете, когда есть, например, элементы братьев и сестер в дереве, перекрывающие друг друга. этот пост для более подробной информации,

Попробуйте оба варианта и проверьте их разные значения.

Мышь пузырьки событий мыши, поэтому вы можете поместить один слушатель в тело и дождаться, когда они начнут пузыриться, затем возьмите event.target или event.srcElement :

Вы можете посмотреть на цель события наведения mouseover на некотором подходящем предке:

Следующий код поможет вам получить элемент указателя мыши. Результирующие элементы будут отображаться в консоли.

elementFromPoint() получает только первый элемент в дереве DOM. Это в основном не достаточно для нужд разработчиков. Поэтому есть эта хорошая функция:


Это возвращает массив всех элементов элемента под заданными точками.

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

Цель события mousemove DOM — это самый верхний элемент DOM под курсором при перемещении мыши:

Это похоже на решение @Philip Walton, но не требует jQuery или setInterval.

Вы можете использовать этот селектор для подмаскивания объекта и управлять им как объект jquery. $(‘:hover’).last();

Позвольте мне начать, сказав, что я не рекомендую использовать метод, который я собираюсь предложить. Гораздо лучше использовать события, связанные с развитием и привязать события только к тем элементам, которые вам интересны, чтобы узнать, закончилась ли мышка с помощью mouseover , mouseout , mouseenter , mouseleave и т.д.

Если вы абсолютно ДОЛЖНЫ иметь возможность узнать, какой элемент мыши закончил, вам нужно написать функцию, которая связывает событие mouseover со всем в DOM, а затем сохраняет то, что текущий элемент находится в некотором переменная.

Вы могли бы что-то вроде этого:

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

Рисуем круг, движущийся вслед за курсором мыши

Сегодня мы с помощью canvas JavaScript нарисуем круг, который будет двигаться вслед за курсором мыши.

Основной подход

Прежде чем мы перейдем к коду, поговорим о том, как мы создадим круг, следующий за курсором мыши. Но сначала нам нужно нарисовать эту окружность:

Надпись на картинке: Круг нарисован без соблюдения масштаба.

Положение круга будет меняться в зависимости от того, где именно находится курсор мыши. Это означает, что при каждом изменении положения курсора мыши нам нужно перерисовывать круг:

Этот пример не такой уж сложный, чтобы разобраться в нем. Но это не значит, что нет ничего интересного “ за кулисами ”. Далее при рассмотрении JavaScript мы коснемся некоторых важных аспектов приведенного кода, которые вы, возможно, не поняли.

С чего начать работу?

Первое, что нам нужно — это страница, готовая к работе с canvas JavaScript . Если у вас еще нет ее, то поместите следующий код в пустую HTML-страницу :


Есть canvas JavaScript , который имеет идентификатор id со значением « myCanvas ». Для экономии времен, я предоставил вам две строки кода, необходимых для доступа к элементу canvas и его контексту рендеринга. Если все это для вас ново, уделите несколько минут и прочитайте статью « С чего начать работу с элементом Canvas ».

Рисуем круг

Первое, что мы собираемся сделать, это нарисовать круг. Внутри тега

Как определить находится ли мышка над элементом в данный момент?

нужно обрабатывать события onmouseover и onmouseout (если я не ошибаюсь в названиях) и записывать элементу какой-то аттрибут: мышка зашла на элемент — записали аттрибут, мышка ушла — убрали аттрибут. но у вас таких элементов будет много из-за того, что событие всплывает вверх и потому чтобы найти элемент, на котором сейчас мышка нужно будет найти элемент, у которого установлен аттрибут, но у него нет детей с установленным аттрибутом

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

Цукерберг рекомендует:  Стикеры Да пожалуйста - Sticker.js

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

Работа с мышкой в СИ

Работа с мышкой.

Отслеживание курсора мышки

Частенько приложению требуется знать координаты курсора мышки. Обычно, это графические программы, которые отслеживают координаты курсора во время рисования какого-нибудь рисунка. Так же отслеживать положение мышки необходимо приложениям работающим с текстом для возможности выделения блоков текста.

Для того, чтобы отслеживать курсор мышки, обычно необходимо обработать три сообщения WM_LBUTTONDOWN, WM_MOUSEMOVE, и WM_LBUTTONUP. Как правило, отслеживание курсора начинается с поступления сообщения WM_LBUTTONDOWN, в параметре lParam которого записаны координаты курсора. Далее начинается сам процесс отслеживания путём обработки потока сообщений WM_MOUSEMOVE которые постит само окно при перемещении мышки. Поступление сообщения WM_LBUTTONUP сигнализирует об окончании процесса отслеживания.

Так же можно использовать функцию TrackMouseEvent, чтобы заставить систему посылать другие сообщения необходимые для отслеживания курсора. Сообщение WM_MOUSEHOVER посылается системой когда мышка попадает в клиентскую область, а сообщение WM_MOUSELEAVE — когда курсор покидает клиентскую область. Соответственно, сообщения WM_NCMOUSEHOVER и WM_NCMOUSELEAVE отвечают за неклиентскую область.

Рисование линий при помощи мышки

В данном разделе статьи представлена часть кода оконной процедуры, которая позволяет пользователю рисовать линии в клиентской области окна путём перетаскивания мышки.

Когда оконная процедура получает сообщение WM_LBUTTONDOWN, то происходит захват мышки и сохранение координат курсора, используя их как начальную точку линии. При этом используется функция ClipCursor, чтобы ограничить перемещение курсора клиентской областью в процессе рисования.

В течение первого сообщения WM_MOUSEMOVE оконная процедура рисует линию от начальной точки до текущей позиции курсора. В течение последующих сообщений WM_MOUSEMOVE, оконная процедура стирает предыдущую линию путём рисования повёрх неё линии инверсного цвета. Затем снова рисуется линия от начальной точки до текущих координат курсора.

Поступление сообщения WM_LBUTTONUP сигнализирует об окончании рисования. Оконная процедура освобождает захват мышки и снимает ограничение движения мышки клиентской областью.


Обработка двойного щелчка

Чтобы получать сообщения о двойном щелчке (double-click messages), класс окна должен содержать стиль CS_DBLCLKS. Этот стиль устанавливается при регистрации оконного класса, как показано ниже.

Сообщение о двойном щелчке всегда предшевствует сообщению о нажатии кнопки.

Выделение строки текста

В данном разделе приведён пример, который был взят из обычного текстового редактора. Он включает код, позволяющий пользователю обычным щелчком устанавливать каретку в любом месте текста, а также выделять (подсвечивать) строку текста двойным щелчком.

Использование колеса мышки в документах с встраиваемыми объектами

В этом разделе представлен пример, демонстрирующий работу с документом Microsoft® Word, с различными встраиваемыми объектами:

  • Таблица Microsoft Excel
  • Элемент управления list box, который скроллируется в ответ на вращение колёсика
  • Элемент управления text box, который не реагирует на колёсико

Сообщение MSH_MOUSEWHEEL всегда посылается главному окну в Microsoft Word, даже если активна встраиваемая таблица экселя. Следующая таблица объясняет, как сообщение MSH_MOUSEWHEEL обрабатывается в ответ на изменение фокуса.

Фокус на Обрабатывается следующим образом
документе Word Word скроллирует окно документа.
внедрённой таблице Excel Word постит сообщение в Excel. Вы должны решить, должно ли внедрённое приложение реагировать на сообщение или нет.
внедрённом элементе управления Сперва приложение посылает сообщение внедрённому контролу, который имеет фокус, и проверяет код возврата, чтобы узнать, обработал ли это сообщение внедрённый элемент управления. Если элемент управления не обработал сообщение, то приложение начнёт скроллировать окно всего документа. Например, если пользователь кликает по списку (list box), а затем начинает вращать колёсико, то список будет скроллироваться в соответствии с вращением колеса. Если пользователь кликнет в текстовое окно, а затем будет прокручивать колёсико, то будет скроллироваться весь документ.

Следующий пример демонстрирует, как приложение может обработать два сообщения от колёсика.

Получаем количество строк, проскроллированных колесом мышки

Следующий пример, позволяет узнать количество проскроллированных строк. Для тех операционных систем, которые изначально поддерживают колёсико мышки, такие как Microsoft Windows NT® 4.0 и выше, рекомендуется использовать SystemParametersInfo.

Selenium Driver: наведение курсора мыши на элемент

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

Собственно, стоит задача имитировать событие mouseover над этим элементом. Для этого используется метод moveToElement класса Actions, который входит в состав Advanced User Interactions API. API-интерфейс (в основном) завершен для имитации действий. Он полностью выполнен для HtmlUnit и Firefox, и сейчас в процессе выполнения для Opera и IE.

  • voidmoveToElement(WebElement toElement) — перемещает курсор (из текущего положения) к центру элементу;
  • voidmoveToElement(WebElement toElement, int xOffset, int yOffset) — перемещает курсор (из текущего положения) в координаты, рассчитанные от левого верхнего угла элемента с заданным смещением: (X координата элемента + xOffset, Y координата элемента + yOffset).


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

Пример наведения курсора на элемент:

WebDriver взаимодействие с пользователем имитирует либо вызовом Javascript события напрямую, либо позволяет браузеру генерировать Javascript событие (то есть native events).
В FirefoxDriver, native events могут быть включены или отключены в профиле Firefox.

Альтернативный вариант вызова события mouseover элемента — это использование Javascript:

События onmouseover и onmouseout в javascript и jQuery

Использование событий onmouseover и onmouseout во многих случаях можно заменить CSS стилями, но иногда требуется на javascript отследить действие курсора над одним элементом и совершить в этот момент действие с другим другим объектом. Разберем на простых примерах как это реализовать.

  • «onmouseover» — срабатывает при заходе курсора на элемент;
  • «onmouseout» — срабатывает при уходе курсора с элемента.

Самое простое, это создать эти события внутри тега:

При наведении курсора на текст появляется блок, который может содержать любые элементы веб-сайта. Несмотря на то, что кода мало — он плохо воспринимается и работать с ним не удобно, поэтому отделим html-теги, javascript-функции и CSS-стили:

Количество строк увеличилось, но код стал лучше читаться и теперь править его проще.

События onmouseover и onmouseout в jQuery

Javascript это хорошо, но если в проекте используется библиотека jQuery, то стоит воспользоваться её возможностями для работы с событиями onmouseover и onmouseout. Перепишем предыдущий пример на jQuery.

не забудьте про CSS стили

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

Цукерберг рекомендует:  Сэр Клайв Синклер изобретатель, гений, рыцарь

Полноценные события мыши на графических элементах Canvas

Проблема

Те, кто занимается разработкой графики с использованием JavaScript + Canvas давно заметили проблему обработки мышиных событий на каких-либо элементах графики.


Решений проблемы несколько:

  1. Не обрабатывать их совсем, то есть ваша графика неинтерактивна и вам это ни к чему
  2. Вычислять прямоугольник для каждой фигуры, хранить его в памяти, и вызывать события при попадании курсора в эти прямоугольники
  3. Подходить к каждому элементу графики индивидуально, применяя различные математические формулы для прямоугольников, окружностей, линий, и т.п.

Все эти способы имеют право на жизнь в определенных обстоятельствах, но когда события обнаруживать нужно (отметаем вариант 1), когда фигуры зачастую не являются прямоугольными, имеют повороты, и прочие трансформации (вариант 2 тоже не подходит), когда фигуры не являются геометрически правильными, как например, сглаженые сплайнами линии, многоугольники с вогнутими гранями (вариант 3 тоже забыли), а самое главное, когда этих фигур становится бесчисленное множество, и хранить координаты каждой, перебирая их на каждый MouseMove становится накладным, на помощь приходит другой способ.

Подход к решению

Нам нужно до пикселя точно знать попал курсор на нашу фигуру или нет. Для этого предпримем следующее:
При создании фигуры присвоим ей уникальный числовой идентификатор, например, 1. Теперь преобразуем этот идентификатор цвет в RGB HEX нотации — #000001 .

Создадим новый элемент canvas для того слоя, на котором находится фигура, но не будем добавлять его в DOM, это наш фоновый холст.
Во время отрисовки фигуры на основном холсте, отрисуем ее же на фоновом, но тем цветом, что получился из ее идентификатора (в том числе и линии границ).
Теперь становится понятно, что при соблюдении порядка отрисовки, фигуры на фоновом холсте будут перекрывать друг друга в том порядке, что и на реальном, и при движении курсора мыши по основному холсту, можно по координатам узнать цвет пикселя фонового холста, который является идентификатором фигуры, что позволяет однозначно сказать что курсор зашел на фигуру или ушел с нее.

Подводные камни

При движении мыши мы определяем цвет пикселя под ней, и если он непрозрачный (Alpha = 255) , определяем идентификатор фигуры и работаем с событиями.

Но не все так радужно. Есть 3 основных проблемы:

1. Сглаживание

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

Решение:
Нужно отрисовывать границы фигуры на 2 пикселя толще (или просто 2 пикселя при отсутствии этой самой границы). Это создаст дополнительный шум в окрестных пикселях, но так как для нас они не являются значимыми, а также не видны пользователю, можно этим пренебречь.

2. Слияние цветов

При пересечении 2 фигур, то же самое сглаживание может создать полностью непрозрачные пиксели, цвет которых, будет переходным от цвета одной фигуры к цвету другой. При этом есть небольшая вероятность того, что этот цвет укажет на совершенно другую фигуру, которая находится в совершенно другом месте. В реально работающем приложении такая вероятность достаточно низка, но мы ведь хотим все предусмотреть?

Решение:
Для проверки достоверности идентификатора нужно узнать цвет 4 пикселей — сверху, снизу, справа и слева. Если каждый из них того же цвета или не полностью прозрачен, идентификатор достоверен.

3. Изображения

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

В этом случае нет четко поставленой прблемы, есть лишь 3 нюанса на которые стоит обратить внимание.


  • Первый – для обработки изображения нам потребуется создать еще один элемент Canvas, совпадающий по размерам с изображением для вывода функции обработки и использования его в качестве источника изображения в фоновом холсте. Стоит либо удалять этот элемент каждый раз после использования, либо создать один общий, и менять его размеры под каждую новую картинку.
  • Второй – время обработки изображения пропорционально его размерам, так как приходится обходить каждый пиксель. Здесь однозначно ничего сказать нельзя, все зависит от функции обработки.
  • Третий – в случае изображений, полученых не из того домена, на котором находится страница, содержащая элемент Canvas, сработает защита браузера. Придется обрабатывать ошибку SECURITY_ERR , и работать с изображением как с прямоугольником.

Реализация

Итак, мы уже имеем фоновый холст с отрисоваными нужными цветами фигурами. Как получить цвет пикселя под курсором? Ниже приведен абстрактный код, демонстрирующий как зная координаты курсора получить пиксель под ним:

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

Источник

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

Determine which element the mouse pointer is on top of in Javascript

I want a function that tells me which element the mouse cursor is over.

So, for example, if the user’s mouse is over this textarea (with id wmd-input ), calling window.which_element_is_the_mouse_on() will be functionally equivalent to $(«#wmd-input»)

13 Answers 13

There’s a really cool function called document.elementFromPoint which does what it sounds like.

What we need is to find the x and y coords of the mouse and then call it using those values:

In newer browsers, you could do the following:

That’ll give you a NodeList of items that the mouse is currently over in document order. The last element in the NodeList is the most specific, each preceding one should be a parent, grandparent, and so on.

Although the following may not actually answering the question, since this is the first result of googling (the googler may not asking exactly the same question:), hope it will provide some extra input.

There are actually two different approaches to get a list of all elements the mouse is currently over (for newer browsers, perhaps):

The «structual» approach — Ascending DOM tree

As in dherman’s answer, one can call


However, this assumes that only children will overlay their ancestors, which is usually the case, but not true in general, especially when dealing with SVG where element in different branches of the DOM tree may overlap each other.

The «visual» approach — Based on «visual» overlapping

This method uses document.elementFromPoint(x, y) to find the topmost element, temporarily hide it (since we recover it immediately in the same context, the browser will not actually renders this), then go on to find the second topmost element. Looks a little hacky, but it returns what you expect when there are, e.g., siblings elements in a tree occluding each other. Please find this post for more details,

Цукерберг рекомендует:  Wordpress - Помощь с wordpress

Try both, and check their different returns.

Nice to know that:) – herrlich10 Oct 22 ’15 at 9:33

elementFromPoint() gets only the first element in DOM tree. This is mostly NOT enough for developers needs. Therefore there ist this nice function:

This returns an array of all element objects under the given points.

For older browsers which is not supported this, you may use this answer as a fallback

Mouseover events bubble, so you can put a single listener on the body and wait for them to bubble up, then grab the event.target or event.srcElement :

The following code will help you to get element of mouse pointer. Resulted elements will display in console.

You can look at the target of the mouseover event on some suitable ancestor:

The target of the mousemove DOM event is the top-most DOM element under the cursor when the mouse moves:

This is similar to @Philip Walton’s solution, but doesn’t require jQuery or a setInterval.

You can use this selector to undermouse object and than manipulate him as jquery object. $(‘:hover’).last();

Let me start out by saying that I don’t recommend using the method I’m about to suggest. It’s much better to use event driven development and bind events only to the elements you’re interested in knowing whether or not the mouse is over with mouseover , mouseout , mouseenter , mouseleave , etc.

If you absolutely MUST have the ability to know which element the mouse is over, you’d need to write a function that binds the mouseover event to everything in the DOM, and then store whatever the current element is in some variable.

You could so something like this:

Basically, I’ve created an immediate function which sets the event on all elements and stores the current element within the closure to minimize your footprint.


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

Процесс обработки любого события — это создание какой-либо функции и добавление ее в качестве обработчика для конкретного элемента. Прочитать о способах обработки событий вы можете в статье «Обработка событий в JavaScript».

Пример обработчика события onmouseover как атрибута элемента

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

Наведи мышь, и текст покраснеет

Однако, это событие редко используется самостоятельно. Обычно оно «идет в паре» с обработкой события onmouseout, которое происходит , когда пользователь убирает указатель мыши с элемента или с одного из его дочерних элементов, т.е. выполняет действие, обратное для onmouseover. Посмотрим, как похожий пример будет выглядеть с обработкой 2-х событий:

Наведи мышь, и текст покраснеет, а потом почернеет снова

В примерах выше в обоих случаях было использовано ключевое слово this , которое указывает на объект, к которому применяется обработчик события. В нашем случае это был абзац с текстом.

Если задуматься о сути того, что было сделано, то мы просто сымитировали двумя обработчиками событий работу псевдокласса :hover :

Наведи мышь, и текст покраснеет, а потом почернеет снова

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

Обработка наведения/уведения курсора мыши для изображений

Рассмотрим пример посложнее. Предположим, на нужно заменить одно изображение другим. Просто так это в CSS или HTML не сделать, хотя можно использовать свойства background-image или свойство content:url() в псевдоэлементах ::before или ::after. Для тега это нужно будет сделать с помощью JavaScript:

Наведите курсор мыши на изображение, а затем уберите его

Пример обработки событий onmouseover и onmouseout с делегированием событий

В примере выше при наведении/уведении курсора мыши изображение меняется на другое и затем опять происходит возврат к отображению первой картинки. Мы усложним задачу и сделаем несложный вариант увеличения картинки в отдельном блоке при наведении курсора мыши на нее. Что-то подобное, но в более сложном варианте, предлагают обычно интернет-магазины одежды.

Для примера нам понадобится 2 div-а-контейнера:

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


Ниже представлена разметка и CSS-стили.

Сам пример выглядит так:

Код на JavaScript:

Обратите внимание, что здесь использована обработка событий с помощью метода addEventListener . В этом случае вместо onmouseover ( onmouseout ) записывается только название, а не обработчик события — mouseover ( mouseout ).

Делегирование событий заключается в том, что мы не писали обработчики для каждого тега img , а задали всего один для их родительского элемента — div-a c . В функции же, которая обрабатывает действия пользователя, мы использовали строку var target = event.target для того, чтобы определить целевой объект события, т.е. тег img .

Также в коде мы учли, что между изображениями в div-e есть отступы, которые относятся к родительскому элементу, поэтому строка if (target.tagName != «IMG») проверяет, а является ли наш целевой объект тегом , и только в этом случае отображает увеличенное изображение. Вы можете самостоятельно отследить, для какого элемента наступает событие при наведении курсора мыши с помощью строки console.log(target.tagName) и консоли в браузере (ее вызывает клавиша F12), если откроете пример в новой вкладке.

На скриншоте представлена консоль в браузере Mozilla Firefox. Стрелками показаны места наведения указателя мыши.

События onmouseover и onmouseout в javascript и jQuery

Использование событий onmouseover и onmouseout во многих случаях можно заменить CSS стилями, но иногда требуется на javascript отследить действие курсора над одним элементом и совершить в этот момент действие с другим другим объектом. Разберем на простых примерах как это реализовать.

  • «onmouseover» — срабатывает при заходе курсора на элемент;
  • «onmouseout» — срабатывает при уходе курсора с элемента.

Самое простое, это создать эти события внутри тега:

При наведении курсора на текст появляется блок, который может содержать любые элементы веб-сайта. Несмотря на то, что кода мало — он плохо воспринимается и работать с ним не удобно, поэтому отделим html-теги, javascript-функции и CSS-стили:

Количество строк увеличилось, но код стал лучше читаться и теперь править его проще.

События onmouseover и onmouseout в jQuery

Javascript это хорошо, но если в проекте используется библиотека jQuery, то стоит воспользоваться её возможностями для работы с событиями onmouseover и onmouseout. Перепишем предыдущий пример на jQuery.

не забудьте про CSS стили

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих