Mouseover/out

@Vlados117 · Регистрация: 17.12.2014

Студворк — интернет-сервис помощи студентам

Не могу понять почему не работает onmouseout. Если убрать onmouseover то все срабатывает, но если onmouseover есть, то просто игнорится onmouseout

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <title>Test 1</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>   
<script src="jquery.smartmenus.min.js"></script>    
<script src="jquery-ui.min.js"></script>
<script>
    window.onload=function() {
        var test = document.getElementById('test1');
        
 
        test.onmouseout = function () {
        test.innerHTML="<p>&&&&&&&&&&&&&&&&&&&&&&&&&&&&7</p>";  
        };
 
        test.onmouseover = function() {
            console.log("Вход в onmouseover");
        test.innerHTML="<p>2222222222222222222222</p>"  ;   
        };
        var testt = document.getElementById('test2');
        testt.onmouseover = function() {
        testt.innerHTML="<p>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;</p>"    ;   
        };
        
    };
</script>   
</head>
<body>
<div id="test1">
    <p>!!!!!!!!!!!!!!!!!!!!!!!!</p>
</div>
<div id="test2">
    <p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</p>
</div>
</body>
</html>

@amr-now · 25.10.2018, 10:29

Здесь происходит множественная генерация событий при каждом создании нового элемента.
Создался? Наведен? Ура, сообщим, что наведён.
Есть хороший топорный способ - вынести переключатель во внешнюю переменную и изредка пинать эту переменную.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="test1">
        <p>!!!!!!!!!!!!!!!!!!!!!!!!</p>
    </div>
    <div id="test2">
        <p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</p>
    </div>
    <script>
        window.onload = function () {
            var test = document.getElementById('test1');
            var isOver = false;
            test.onmouseover = function () {
                if (isOver) return false;
                isOver = true;
                console.log("Вход в onmouseover");
                test.innerHTML = "<p>2222222222222222222222</p>";
            };
            test.onmouseout = function () {
                if (!isOver) return false;
                isOver = false;
                test.innerHTML = "<p>&&&&&&&&&&&&&&&&&&&&&&&&&&&&7</p>";
                console.log("Вход в onmouseout");
            };
 
            var testt = document.getElementById('test2');
            var isOverT = false;
            testt.onmouseover = function () {
                if (isOverT) return false;
                isOverT = true;
                testt.innerHTML = "<p>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;</p>";
            };
            testt.onmouseout = function () {
                if (!isOverT) return false;
                isOverT = false;
                testt.innerHTML = "<p>&&&&&&&&&&&&&&&&&&&&&&&&&&&&7</p>";
            };
        };
    </script>
</body>
</html>

@AlexZaw · 25.10.2018, 10:49

Сообщение от amr-now

Здесь происходит множественная генерация событий при каждом создании нового элемента.

Интересно то, что если удалить из test.innerHTML = "2222222222222222222222"; и test.innerHTML="&&&&&&&&&&&&&&&&&&&&&&&&&&&&7"; теги параграфа, то скрипт отрабатывает нормально, хотя ведь тоже каждый раз происходит генерация новой текстовой ноды. Почему так?

@Vlados117 · 25.10.2018, 10:50 **[ТС]**

Понятно. Получается функция замены mouseover так часто срабатывает что mouseout просто не успевает как бы ? А с помощью этой переменной мы даем функции сработать один раз за раз ?

@amr-now · 25.10.2018, 11:18

AlexZaw, Vlados117, что тут можно сказать? Надо побольше читать и на сайте Mozilla, и на сайте Microsoft и других корифеев и авторов языка.
И много экспериментировать, опять же на разных браузерах ))))

@AlexZaw · 25.10.2018, 11:40

Сообщение от amr-now

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

Пока не увидел данную тему - даже вопроса подобного не возникало. По логике ведь без разницы используется ли тег параграфа в innerHTML или нет. Происходят ведь абсолютно одинаковые вещи. Содержимое дива удаляется, он схлопывается по высоте, затем содержимое записывается по новой, див принимает высоту контента и опять срабатывает mouseover. Ну а mouseout просто не успевает сработать из-за особенностей браузера. Так в чем же отличие между тем что в innerHTML есть тег и тем что там просто текстовая нода?
Если уж не хотите объяснить своими словами, то дайте ссылочку - обязательно почитаю. У меня не так хорошо с английском чтобы найти такую специфическую информацию.

Qwerty_Wasd · 25.10.2018, 17:05

AlexZaw, amr-now, Vlados117,

Сообщение от Vlados117

Не могу понять почему не работает onmouseout

У вас все работает так, как Вы написали. И (внимание) работает правильно.События mouseover/mouseout всплывают. То есть наводя на элемент, который содержит объект события, сработает вплоть до самого глубокого элемента в DOM под курсором и пойдет обратно. И так до бесконечности. Поэтому происходит постоянный вызов. Если убирать мышку прямо с элемента, на котором висит событие mouseout, сработает так как нужно Vlados117. Для понимания - https://jsfiddle.net/Qwerty_Wasd/0tw9f8cz/
границы элементов определены, смотрите в консоль

CSS
1
2
3
4
5
6
7
8
9
10
#test1 {
    border: 2px solid #000;
}
#test2 {
    margin-top: 20px;
    border: 2px solid #000;
}
#test1 p, #test2 p {
    background: red;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var test = document.getElementById('test1');
test.onmouseover = function() {
    console.log("Вход в onmouseover");
    test.innerHTML="<p>2222222222222222222222</p>"  ;   
};
test.onmouseout = function () {
    test.innerHTML="<p>&&&&&&&&&&&&&&&&&&&&&&&&&&&&7</p>";  
};
var testt = document.getElementById('test2');
testt.onmouseover = function() {
  console.log("Вход в onmouseover");
    testt.innerHTML="<p>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;</p>"    ;   
};
testt.onmouseout = function() {
    testt.innerHTML="<p>111111111111111111111111111111111</p>"    ;   
};

Vlados117 Если с инглишем неплохо, то - https://developer.mozilla.org/... ide/Events

@AlexZaw · 25.10.2018, 18:16

Qwerty_Wasd, приветсвую.
Или я не понял, или мы друг друга не поняли. Смотрите. Берем изначальный код ТС, он не работает так как ему хочется. Т.е. при уводе курсора с #test1 текст не меняется. Теперь берем тот же самый код, но удаляем из него все теги  т.е. получаем следующий код:

HTML5
1
2
3
4
5
6
<div id="test1">
    !!!!!!!!!!!!!!!!!!!!!!!!
</div>
<div id="test2">
    yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  window.onload=function() {
        var test = document.getElementById('test1');
        
        test.onmouseout = function () {
        test.innerHTML="&&&&&&&&&&&&&&&&&&&&&&&&&&&&7";  
        };
 
        test.onmouseover = function() {
            console.log("Вход в onmouseover");
        test.innerHTML="2222222222222222222222"  ;   
        };
        var testt = document.getElementById('test2');
        testt.onmouseover = function() {
        testt.innerHTML=";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"    ;   
        };
        
    };

По большому счету ничего не изменилось. Обрабатываются те же события, на тех же элементах, теми же способами, так же происходит всплытие. Но код начинает работать так как и хотелось ТС. Почему?

Qwerty_Wasd · 25.10.2018, 19:21

AlexZaw, привет

Вот я как раз об этом и писал.

Сообщение от AlexZaw

Теперь берем тот же самый код, но удаляем из него все теги

и теперь событие не погружается до последнего потомка. Оно просто срабатывает на дивах. Потомков нет. Сделать так как удобно было бы ТСу, можно с помощью onmouseenter/onmouseleave, они не всплывают. Ну загляни хотя бы к Кантору (плохой совет, я знаю). http://javascript.ru/tutorial/events

Добавлено через 2 минуты
Но лучше сюда - https://www.w3.org/TR/DOM-Leve... vents-flow

Добавлено через 4 минуты
AlexZaw, для понимания, отвлекись от примера ТСа.
Песочница - https://codepen.io/qwerty_wasd/pen/JmwOrm

HTML5
1
2
3
4
5
<div class="div1">
  <div class="div2">
    <div class="div3"></div>
  </div>
</div>

JavaScript
1
2
3
4
// поменяй на onmouseenter
document.querySelector('.div1').onmouseover = function(e) {
  console.log(e.target);
}

и смотри в консоль.

@amr-now · 25.10.2018, 20:12

Vlados117, В Opera 56 с этими onmouseenter и onmouseleave какая-то неадекватность творится ((

Продолжают мотаться счетчики в консоли.

Добавлено через 6 минут
А сочетание onmouseenter и onmouseleave с внешней переменной в Opera 56 работает исправно:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="test1">
        <p>!!!!!!!!!!!!!!!!!!!!!!!!</p>
    </div>
    <div id="test2">
        <p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</p>
    </div>
    <script>
        window.onload = function () {
            var test = document.getElementById('test1');
            var isOver = false;
            test.onmouseenter = function (e) {
                if (isOver) return false;
                isOver = true;
                console.log("Вход в onmouseover");
                test.innerHTML = "<p>2222222222222222222222</p>";
            };
            test.onmouseleave = function (e) {
                if (!isOver) return false;
                isOver = false;
                test.innerHTML = "<p>&&&&&&&&&&&&&&&&&&&&&&&&&&&&7</p>";
                console.log("Вход в onmouseout");
            };
 
            var testt = document.getElementById('test2');
            var isOverT = false;
            testt.onmouseenter = function () {
                if (isOverT) return false;
                isOverT = true;
                testt.innerHTML = "<p>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;</p>";
            };
            testt.onmouseleave = function () {
                if (!isOverT) return false;
                isOverT = false;
                testt.innerHTML = "<p>&&&&&&&&&&&&&&&&&&&&&&&&&&&&7</p>";
            };
        };
    </script>
</body>
</html>

Добавлено через 23 минуты

Сообщение от AlexZaw

Интересно то, что если удалить из test.innerHTML = "2222222222222222222222"; и test.innerHTML="&&&&&&&&&&&&&&&&&&&&& &&&&&&&7"; теги параграфа, то скрипт отрабатывает нормально, хотя ведь тоже каждый раз происходит генерация новой текстовой ноды. Почему так?

На Стеке пишут:
Text nodes simply don't fire most events: historically, elements have had the responsibility for doing that in HTML DOMs. However, text nodes do fire some events (но не те, которые нужны)

Qwerty_Wasd · 25.10.2018, 20:14

Сообщение от amr-now

На Стеке пишут:
Text nodes simply don't fire most events: historically, elements have had the responsibility for doing that in HTML DOMs. However, text nodes do fire some events (но не те, которые нужны)

@AlexZaw · 25.10.2018, 21:58

Сообщение от Qwerty_Wasd

и теперь событие не погружается до последнего потомка. Оно просто срабатывает на дивах.

Все равно не понимаю

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

Сообщение от Qwerty_Wasd

для понимания, отвлекись от примера ТСа.

Кстати много где читал, что обработчики назначенные через on сразу начинают со всплытия, но пример показывает обратное.
Вроде простая проблема, которую, к тому же, можно легко обойти, но нет же - всю голову уже сломал

Добавлено через 5 минут
p.s. Даже с помощью таймеров пытался притормозить функции, чтобы браузер точно успевал отловить mouseout, все равно не помогает

Qwerty_Wasd · 25.10.2018, 22:38

AlexZaw,

Сообщение от AlexZaw

постоянно погружается/всплывает из-за изменения контента и каждый раз срабатывает на диве.

в точку.

Сообщение от AlexZaw

Но вот хоть убей не могу понять почему не срабатывает mouseout ?

а вот теперь другой пример. https://codepen.io/qwerty_wasd/pen/JmwOrm

JavaScript
1
2
3
4
5
6
document.querySelector('.div1').onmouseover = function(e) {
  console.log(e.target);
}
document.querySelector('.div1').onmouseout = function(e) {
  console.log(e.target);
}

стили немного изменил - заходи\выходи с разных сторон

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.div1 {
  display: flex;
  height: 200px;
  width: 200px;
  border: 1px solid #000000;
  margin: 100px auto;
}
.div1 > .div2 {
  height: 100px;
  width: 100px;
  border: 1px solid #000000;
}
.div1 > .div2 > .div3 {
  display: block;
  height: 50px;
  width: 50px;
  border: 1px solid #000000;
}

Добавлено через 1 минуту
mouseout будет срабатывать только на выходе вверх по дереву

Добавлено через 13 минут
Вот из-за такого поведения для всплывающих событий и придумали capture events. Делегируя событие уровнем выше, мы ловим их на нужном элементе. https://codepen.io/qwerty_wasd/pen/LgMBwK

JavaScript
1
2
3
4
5
6
document.body.addEventListener('mouseover',function(e) {
  if (e.target.classList.contains('div1')) console.log(e.target);
});
document.body.addEventListener('mouseout',function(e) {
  if (e.target.classList.contains('div1')) console.log(e.target);
});

@shvyrevvg · 26.10.2018, 08:42

Qwerty_Wasd, но mouseout не срабатывает из-за того что браузер не успевает обработать все события, правильно?

@AlexZaw · 26.10.2018, 10:21

Qwerty_Wasd, т.е. по сути получается что при mouseover, событие перехватывается на родителе и срабатывает. А при mouseout оно, из-за браузера, не успевает сработать на родителе из-за срабатывания "лишнего" (т.к. курсор может быть только над одним элементом) выхода из ребенка? Ну и плюс накладывается mouseover и mouseout на родителе? Так?

Qwerty_Wasd · 26.10.2018, 13:38

shvyrevvg, AlexZaw,

Сообщение от shvyrevvg

mouseout не срабатывает из-за того что браузер не успевает обработать все события, правильно?

у ТСа цикл тиков у события потому, что:
1. Наводим курсор на test1, событие погружается в глубь DOM
2. Схлопывается потомок, ему ж надо поменять содержимое
3. И курсор оказывается снова на элементе, вызвавшем событие
4. То есть снова происходит событие
5. Тут же показывается содержимое, определенное в событии, у потомка
6. goto к п.1

К моменту выхода курсора - в очереди событий такой шлак твориться. Вы поглядите в консоль. Помимо того что курсор выходит с test1, мы еще и на test2 его переместим и понеслось.

Теперь что касаемо, не срабатывания - ребята Я вам предоставил пример со стилями не просто так. В примере ТС стилей нет, поэтому границ элемента, на котором срабатывает событие, НЕТ!!!!!
Есть только потомок до которого погружается событие. Поэтому при выходе с потомка не срабатывает out. Потому что просто проскакиваем мышкой границы родителя. И тик события не успевает сработать в нем. Я думал это было сразу понятно. Ну блин вы даете!

@AlexZaw · 26.10.2018, 13:43

Сообщение от Qwerty_Wasd

В примере ТС стилей нет, поэтому границ элемента, на котором срабатывает событие, НЕТ!!!!!

Ну границы то есть в любом случае, просто в данном случае они у обоих элементов совпадают

Сообщение от Qwerty_Wasd

И тик события не успевает сработать в нем.

Вот в этом я и хотел разобраться. Спасибо!

Qwerty_Wasd · 26.10.2018, 13:49

AlexZaw,

Сообщение от AlexZaw

Ну границы то есть в любом случае, просто в данном случае они у обоих элементов совпадают

это мы с Вами понимаем

Интерфейсу события на это плевать, ибо мы не указали ему как поступить в таких случаях. Поэтому проще использовать capture events или mouseenter/mouseleave

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Vlados117 2 / 2 / 0 Регистрация: 17.12.2014 Сообщений: 156
	25.10.2018, 10:50 [ТС]
	Понятно. Получается функция замены mouseover так часто срабатывает что mouseout просто не успевает как бы ? А с помощью этой переменной мы даем функции сработать один раз за раз ? 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	25.10.2018, 11:18
	AlexZaw, Vlados117, что тут можно сказать? Надо побольше читать и на сайте Mozilla, и на сайте Microsoft и других корифеев и авторов языка. И много экспериментировать, опять же на разных браузерах )))) 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	26.10.2018, 08:42
	Qwerty_Wasd, но mouseout не срабатывает из-за того что браузер не успевает обработать все события, правильно? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,091
	26.10.2018, 10:21
	Qwerty_Wasd, т.е. по сути получается что при mouseover, событие перехватывается на родителе и срабатывает. А при mouseout оно, из-за браузера, не успевает сработать на родителе из-за срабатывания "лишнего" (т.к. курсор может быть только над одним элементом) выхода из ребенка? Ну и плюс накладывается mouseover и mouseout на родителе? Так? 0