Событие входа мыши постоянно запускается - PullRequest
Новая
       51

Событие входа мыши постоянно запускается

0 голосов
/ 23 апреля 2020

Я пытаюсь выучить html / CSS / Javascript. Я пытался изменить содержание веб-страницы на мероприятии mouseenter. У меня есть три строки в (flex-container-se c -2-col-1) col-1, в которые я добавил прослушиватели событий для следующих идентификаторов деления (se c -2-col-1-row1 и se c -2-col-1-row3) row-1 и row-3. Это то, что я наблюдаю.

Проблема:

При наведении курсора на строку-1 div выполняется обработчик событий, который регистрирует консольное сообщение, изменяет содержание строки-1 от «Это первая строка» до «1111». (Ожидаемое поведение)

Если мы наведем курсор на div-строку-3, мы просто запишем консольное сообщение и НЕ меняем содержимое этой строки. (Ожидаемое поведение)

После изменения содержимого я go выходит из поля элемента div-строки row-1, а затем снова возвращаюсь слева направо или справа налево из синей зоны. Я замечаю, что событие вызывается каждый раз, когда я перемещаю мышь, аналогично событию mousemove, а не событию mouseenter.

Мой вопрос:

  1. Почему такое поведение замечено только в строке 1, а НЕ в строке 3. Единственное отличие состоит в том, что в строке 1 мы регистрируем событие, а также изменяем содержимое элемента div, перезаписывая элемент para, а в строке 3 мы НЕ меняем содержимое, а только регистрируем сообщение.

  2. Я сделал go через бублинг событий, распространение событий, концепции захвата событий, но я не совсем уверен, связано ли это с какой-либо из вышеперечисленных концепций. Может кто-нибудь объяснить, почему событие запускается непрерывно в строке 1, а НЕ в строке 3?

Я добавил фрагменты кода и консоль. Может кто-нибудь, пожалуйста, помогите мне с этим. 

var allrows = document.getElementsByClassName("flex-container-sec-2-col-1-rows");

console.log(allrows);

function msg() {
    console.log('hurray!!! triggered by ' + this.id);
    switch(this.id) {
        case 'sec-2-col-1-row1':
            this.innerHTML = '<p class="row-para"> 1111 </p>';
    }
    
}

allrows[0].addEventListener('mouseenter', msg); //On this id sec-2-col-1-row1
allrows[2].addEventListener('mouseenter', msg);// On this id sec-2-col-1-row3
body {
    background-color: #c5e4f9;
    color:#0e9caf;
    font-family: 'Ubuntu', sans-serif;
}


h1 {
    font-family: font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 45px;
}

h2 {
    font-size: 42px;
}

h3 {
    font-size: 35px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18x;
}

h6 {
    font-size: 15px;
}

.flex-container-sec-2 {
    width: 100%;
    display: flex;
}

.flex-container-sec-2-col-1 {
    display: flex;
    flex-direction: column;
    flex:1;
    background-color: blue;
}

.flex-container-sec-2-col-2 {
    flex: 1;
    background-color: #c0dbe2;
    border-style: dashed;
    border-width: thin;
}


.flex-container-sec-2-col-1-rows {
    flex:1;
    border-style: dashed;
    border-width: thin;
    background-color: red;
}

.row-para {
    background-color: blue;
    color: white;
}





    
 <!DOCTYPE html>
<html>
    <head>
        <title>Exercise 1</title>
        <link rel="stylesheet" type="text/css" href="ex1.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato&family=Ubuntu:ital@0;1&display=swap" rel="stylesheet">
    <body>
        <div class="flex-container-sec-2">
            <div class="flex-container-sec-2-col-1">
                <div class="flex-container-sec-2-col-1-rows" id="sec-2-col-1-row1">
                    <p class="row-para"> This is Row One</p>
                </div>
                <div class="flex-container-sec-2-col-1-rows" id="sec-2-col-1-row2">
                    <p> This is Row Two</p>
                </div>
                <div class="flex-container-sec-2-col-1-rows" id="sec-2-col-1-row3">
                    <p class="row-para"> This is Row Three</p>
                </div>
            </div>
            <div class="flex-container-sec-2-col-2">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus aliquet condimentum. Donec dictum, metus sit amet lobortis facilisis, dolor diam ullamcorper augue, nec pulvinar purus ex a ante. Nullam eu sem sit amet massa vehicula dignissim in sed mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis sem sed porta facilisis. Nam nulla est, scelerisque ut mi non, fermentum iaculis ligula.</p>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="ex1.js"></script>
</html>
...