Движение мыши: mouseover/out, mouseenter/leave
В этой главе мы более подробно рассмотрим события, возникающие при движении указателя мыши над элементами страницы.
События mouseover/mouseout, relatedTarget
Событие mouseover происходит в момент, когда курсор оказывается над элементом, а событие mouseout – в момент, когда курсор уходит с элемента.
Эти события являются особенными, потому что у них имеется свойство relatedTarget . Оно «дополняет» target . Когда мышь переходит с одного элемента на другой, то один из них будет target , а другой relatedTarget .
- event.target – это элемент, на который курсор перешёл.
- event.relatedTarget – это элемент, с которого курсор ушёл ( relatedTarget → target ).
Для события mouseout наоборот:
- event.target – это элемент, с которого курсор ушёл.
- event.relatedTarget – это элемент, на который курсор перешёл ( target → relatedTarget ).
В примере ниже каждое лицо и его черты – отдельные элементы. При движении указателя по этим элементам в текстовом поле отображаются происходящие события.
Каждое из них содержит информацию о target и relatedTarget :
container.onmouseover = container.onmouseout = handler; function handler(event) < function str(el) < if (!el) return "null" return el.className || el.tagName; >log.value += event.type + ': ' + 'target=' + str(event.target) + ', relatedTarget=' + str(event.relatedTarget) + "\n"; log.scrollTop = log.scrollHeight; if (event.type == 'mouseover') < event.target.style.background = 'pink' >if (event.type == 'mouseout') < event.target.style.background = '' >>body, html < margin: 0; padding: 0; >#container < border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; >#log < height: 120px; width: 350px; display: block; box-sizing: border-box; >[class^="smiley-"] < display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; >.smiley-green < background: #a9db7a; border: 5px solid #92c563; position: relative; >.smiley-green .left-eye < width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; >.smiley-green .right-eye < width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; >.smiley-green .smile < position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; >.smiley-green .smile:after, .smiley-green .smile:before < content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; >.smiley-green .smile:after < background: #84b458; height: 80%; top: -40%; left: 0%; >.smiley-yellow < background: #eed16a; border: 5px solid #dbae51; position: relative; >.smiley-yellow .left-eye < width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; >.smiley-yellow .right-eye < width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; >.smiley-yellow .smile < position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; >.smiley-red < background: #ee9295; border: 5px solid #e27378; position: relative; >.smiley-red .left-eye < width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; >.smiley-red .right-eye < width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; >.smiley-red .smile < position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; >.smiley-red .smile:after, .smiley-red .smile:before < content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; >.smiley-red .smile:after
Свойство relatedTarget может быть null .
Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.
Следует держать в уме такую возможность при использовании event.relatedTarget в своём коде. Если, например, написать event.relatedTarget.tagName , то при отсутствии event.relatedTarget будет ошибка.
Пропуск элементов
Событие mousemove происходит при движении мыши. Однако, это не означает, что указанное событие генерируется при прохождении каждого пикселя.
Браузер периодически проверяет позицию курсора и, заметив изменения, генерирует события mousemove .
Это означает, что если пользователь двигает мышкой очень быстро, то некоторые DOM-элементы могут быть пропущены:
Если курсор мыши передвинуть очень быстро с элемента #FROM на элемент #TO , как это показано выше, то лежащие между ними элементы (или некоторые из них) могут быть пропущены. Событие mouseout может запуститься на элементе #FROM и затем сразу же сгенерируется mouseover на элементе #TO .
Это хорошо с точки зрения производительности, потому что если промежуточных элементов много, вряд ли мы действительно хотим обрабатывать вход и выход для каждого.
С другой стороны, мы должны иметь в виду, что указатель мыши не «посещает» все элементы на своём пути. Он может и «прыгать».
В частности, возможно, что указатель запрыгнет в середину страницы из-за пределов окна браузера. В этом случае значение relatedTarget будет null , так как курсор пришёл «из ниоткуда»:
Вы можете проверить это «вживую» на тестовом стенде ниже.
В его HTML есть два элемента, вложен в . Если быстро провести мышью над ними, то событие может возникнуть только на внутреннем элементе или только на внешнем, а может вообще не сгенерироваться никаких событий.
Также попробуйте поставить курсор на внутренний элемент, а затем очень быстро сделайте движение мышкой вниз через внешний элемент. Если у вас получится достаточно быстро, то на родительском элементе не будет сгенерировано никаких событий. То есть, мышь пройдёт через внешний элемент, не замечая его.
let parent = document.getElementById('parent'); parent.onmouseover = parent.onmouseout = parent.onmousemove = handler; function handler(event) < let type = event.type; while (type.length < 11) type += ' '; log(type + " target=" + event.target.id) return false; >function clearText() < text.value = ""; lastMessage = ""; >let lastMessageTime = 0; let lastMessage = ""; let repeatCounter = 1; function log(message) < if (lastMessageTime == 0) lastMessageTime = new Date(); let time = new Date(); if (time - lastMessageTime >500) < message = '------------------------------\n' + message; >if (message === lastMessage) < repeatCounter++; if (repeatCounter == 2) < text.value = text.value.trim() + ' x 2\n'; >else < text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; >> else < repeatCounter = 1; text.value += message + "\n"; >text.scrollTop = text.scrollHeight; lastMessageTime = time; lastMessage = message; >Несмотря на то, что при быстрых переходах промежуточные элементы могут игнорироваться, в одном мы можем быть уверены: элемент может быть пропущен только целиком.
Если указатель «официально» зашёл на элемент, то есть было событие mouseover , то при выходе с него обязательно будет mouseout .
Событие mouseout при переходе на потомка
Важная особенность события mouseout – оно генерируется в том числе, когда указатель переходит с элемента на его потомка.
То есть, визуально указатель всё ещё на элементе, но мы получим mouseout !
Это выглядит странно, но легко объясняется.
По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени – над самым глубоко вложенным и верхним по z-index.
Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий.
Обратите внимание на важную деталь.
Событие mouseover , происходящее на потомке, всплывает. Поэтому если на родительском элементе есть такой обработчик, то оно его вызовет.
Вы можете наглядно увидеть это в примере ниже: находится внутри . На родителе определены обработчики событий mouseover/out , которые выводят информацию о них в текстовое поле.
При переходе мышью с внешнего элемента на внутренний, вы увидите сразу два события: mouseout [target: parent] (ушли с родителя) и mouseover [target: child] (перешли на потомка, событие всплыло).
function mouselog(event) < let d = new Date(); text.value += `$:$:$ | $ [target: $]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; >При переходе с родителя элемента на потомка – на родителе сработают два обработчика: и mouseout и mouseover :
parent.onmouseout = function(event) < /* event.target: внешний элемент */ >; parent.onmouseover = function(event) < /* event.target: внутренний элемент (всплыло) */ >;Если код внутри обработчиков не смотрит на target , то он подумает, что мышь ушла с элемента parent и вернулась на него обратно. Но это не так! Мышь никуда не уходила, она просто перешла на потомка.
Если при уходе с элемента что-то происходит, например, запускается анимация, то такая интерпретация происходящего может давать нежелательные побочные эффекты.
Чтобы этого избежать, можно смотреть на relatedTarget и, если мышь всё ещё внутри элемента, то игнорировать такие события.
Или же можно использовать другие события: mouseenter и mouseleave , которые мы сейчас изучим, с ними такая проблема не возникает.
События mouseenter и mouseleave
События mouseenter/mouseleave похожи на mouseover/mouseout . Они тоже генерируются, когда курсор мыши переходит на элемент или покидает его.
Но есть и пара важных отличий:
- Переходы внутри элемента, на его потомки и с них, не считаются.
- События mouseenter/mouseleave не всплывают.
События mouseenter/mouseleave предельно просты и понятны.
Когда указатель появляется над элементом – генерируется mouseenter , причём не имеет значения, где именно указатель: на самом элементе или на его потомке.
Событие mouseleave происходит, когда курсор покидает элемент.
Вот тот же пример, что и выше, но на этот раз на верхнем элементе стоят обработчики mouseenter/mouseleave вместо mouseover/mouseout .
Как вы сами можете увидеть, генерируются только события, связанные с движением курсора относительно верхнего . Ничего не произойдёт при переходе на внутренний и обратно. Переходы на потомки игнорируются.
function mouselog(event) < let d = new Date(); text.value += `$:$:$ | $ [target: $]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; >Делегирование событий
События mouseenter/leave просты и легки в использовании. Но они не всплывают. Таким образом, мы не можем их делегировать.
Представьте ситуацию, когда мы хотим обрабатывать события, сгенерированные при движении курсора по ячейкам таблицы. И в таблице сотни ячеек.
Что ж, не проблема – будем использовать mouseover/mouseout .
Начнём с простых обработчиков, которые выделяют текущий элемент под указателем мыши:
// выделим элемент под мышью table.onmouseover = function(event) < let target = event.target; target.style.background = 'pink'; >; table.onmouseout = function(event) < let target = event.target; target.style.background = ''; >;Вот они в действии. При переходе между элементами этой таблицы, текущий будет подсвечен:
table.onmouseover = function(event) < let target = event.target; target.style.background = 'pink'; text.value += "mouseover " + target.tagName + "\n"; text.scrollTop = text.scrollHeight; >; table.onmouseout = function(event) < let target = event.target; target.style.background = ''; text.value += "mouseout " + target.tagName + "\n"; text.scrollTop = text.scrollHeight; >;#text < display: block; height: 100px; width: 456px; >#table th < text-align: center; font-weight: bold; >#table td < width: 150px; white-space: nowrap; text-align: center; vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; cursor: pointer; >#table .nw < background: #999; >#table .n < background: #03f; color: #fff; >#table .ne < background: #ff6; >#table .w < background: #ff0; >#table .c < background: #60c; color: #fff; >#table .e < background: #09f; color: #fff; >#table .sw < background: #963; color: #fff; >#table .s < background: #f60; color: #fff; >#table .se < background: #0c3; color: #fff; >#table .highlight
Квадрат Bagua: Направление, Элемент, Цвет, Значение Металл
Серебро
Старейшины Вода
Синий
Перемены Земля
Жёлтый
Направление Металл
Золото
Молодость Всё
Пурпурный
Гармония Дерево
Синий
Будущее Земля
Коричневый
Спокойствие Огонь
Оранжевый
Слава Дерево
Зеленый
Роман
Вот пример кода, учитывающего все ситуации:
// ячейка под курсором в данный момент (если есть) let currentElem = null; table.onmouseover = function(event) < // перед тем, как войти на следующий элемент, курсор всегда покидает предыдущий // если currentElem есть, то мы ещё не ушли с предыдущего , // это переход внутри - игнорируем такое событие if (currentElem) return; let target = event.target.closest('td'); // переход не на - игнорировать if (!target) return; // переход на , но вне нашей таблицы (возможно при вложенных таблицах) // игнорировать if (!table.contains(target)) return; // ура, мы зашли на новый currentElem = target; target.style.background = 'pink'; >; table.onmouseout = function(event) < // если мы вне , то игнорируем уход мыши // это какой-то переход внутри таблицы, но вне , // например с на другой if (!currentElem) return; // мы покидаем элемент – но куда? Возможно, на потомка? let relatedTarget = event.relatedTarget; while (relatedTarget) < // поднимаемся по дереву элементов и проверяем – внутри ли мы currentElem или нет // если да, то это переход внутри элемента – игнорируем if (relatedTarget == currentElem) return; relatedTarget = relatedTarget.parentNode; >// мы действительно покинули элемент currentElem.style.background = ''; currentElem = null; >;Полный пример со всеми деталями:
// ячейка под курсором в данный момент (если есть) let currentElem = null; table.onmouseover = function(event) < // перед тем, как войти на следующий элемент, курсор всегда покидает предыдущий // если currentElem есть, то мы ещё не ушли с предыдущего , // это переход внутри - игнорируем такое событие if (currentElem) return; let target = event.target.closest('td'); // переход не на - игнорировать if (!target) return; // переход на , но вне нашей таблицы (возможно при вложенных таблицах) // игнорировать if (!table.contains(target)) return; // ура, мы зашли на новый currentElem = target; target.style.background = 'pink'; >; table.onmouseout = function(event) < // если мы вне , то игнорируем уход мыши // это какой-то переход внутри таблицы, но вне , // например с на другой if (!currentElem) return; // мы покидаем элемент – но куда? Возможно, на потомка? let relatedTarget = event.relatedTarget; while (relatedTarget) < // поднимаемся по дереву элементов и проверяем – внутри ли мы currentElem или нет // если да, то это переход внутри элемента – игнорируем if (relatedTarget == currentElem) return; relatedTarget = relatedTarget.parentNode; >// мы действительно покинули элемент currentElem.style.background = ''; currentElem = null; >;#text < display: block; height: 100px; width: 456px; >#table th < text-align: center; font-weight: bold; >#table td < width: 150px; white-space: nowrap; text-align: center; vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; cursor: pointer; >#table .nw < background: #999; >#table .n < background: #03f; color: #fff; >#table .ne < background: #ff6; >#table .w < background: #ff0; >#table .c < background: #60c; color: #fff; >#table .e < background: #09f; color: #fff; >#table .sw < background: #963; color: #fff; >#table .s < background: #f60; color: #fff; >#table .se < background: #0c3; color: #fff; >#table .highlight
Квадрат Bagua: Направление, Элемент, Цвет, Значение Металл
Серебро
Старейшины Вода
Синий
Перемены Земля
Жёлтый
Направление Металл
Золото
Молодость Всё
Пурпурный
Гармония Дерево
Синий
Будущее Земля
Коричневый
Спокойствие Огонь
Оранжевый
Слава Дерево
Зеленый
Роман
Итого
Мы рассмотрели события mouseover , mouseout , mousemove , mouseenter и mouseleave .
Особенности, на которые стоит обратить внимание:
- При быстром движении мыши события не будут возникать на промежуточных элементах.
- События mouseover/out и mouseenter/leave имеют дополнительное свойство: relatedTarget . Оно дополняет свойство target и содержит ссылку на элемент, с/на который мы переходим.
События mouseover/out возникают, даже когда происходит переход с родительского элемента на потомка. С точки зрения браузера, курсор мыши может быть только над одним элементом в любой момент времени – над самым глубоко вложенным.
События mouseenter/leave в этом отличаются. Они генерируются, когда курсор переходит на элемент в целом или уходит с него. Также они не всплывают.
Задачи
Улучшенная подсказка
Напишите JavaScript код, который показывает подсказку над элементом с атрибутом data-tooltip . Значение атрибута должно становиться текстом подсказки.
Это похоже на задачу Поведение «подсказка», но здесь элементы с подсказками могут быть вложены друг в друга. Показываться должна подсказка на самом глубоко вложенном элементе.
Только одна подсказка может быть показана в любой момент времени.