Справочник API
event.relatedTarget в jQuery
Содержание статьи
-
Категории: Events › Event Object
Идентифицирует DOM-элемент, косвенно участвующий в событии. Например, для mouseout - элемент, на который перешел курсор мыши.
Синтаксис и описание:
Добавлено в jQuery 1.1.4event.relatedTarget
Свойство event.relatedTarget указывает на «второй» DOM-элемент, косвенно участвующий в событии, — тот, откуда или куда «переходит» действие. У события
mouseoutэто элемент, на который курсор переместился; уmouseover— элемент, с которого курсор ушёл. Аналогично работает для парmouseenter/mouseleaveиfocusin/focusout: там relatedTarget указывает на элемент, теряющий или получающий фокус.Для большинства других событий (клик, нажатие клавиши и т. д.) свойство равно
null, так как второго элемента там нет.
Возвращаемое значение: (элемент или null) DOM-элемент, если применимо для данного события.
Примечание:
Не путайте с event.target (элемент — источник события) и event.currentTarget (элемент, на котором сработал именно этот обработчик).
В jQuery 3.x и 4.0:
Свойство работает без изменений. Полностью соответствует нативному
MouseEvent.relatedTarget/FocusEvent.relatedTarget— jQuery ничего не эмулирует, а лишь передаёт значение из исходного события.
Примеры:
Узнаём, на какой элемент перешёл курсор при уходе со ссылки:
$( "a" ).on( "mouseout", function ( event ) { console.log( "Курсор перешёл на:", event.relatedTarget && event.relatedTarget.nodeName ); } );Игнорируем
mouseleaveс меню, если фокус переходит на его же вложенный пункт (частая задача для выпадающих меню):$( "#menu" ).on( "mouseleave", function ( event ) { if ( $.contains( this, event.relatedTarget ) ) { return; // курсор всё ещё внутри меню } $( this ).removeClass( "open" ); } );Определяем, ушёл ли фокус за пределы формы:
$( "#profile-form" ).on( "focusout", function ( event ) { if ( !$.contains( this, event.relatedTarget ) ) { console.log( "Фокус покинул форму" ); } } );