onmouseover с javascript

Я хотел бы, чтобы div a и div b менялись местами, когда мышь находится над div b, а затем переключались обратно, когда мышь покидала div a. Но он очень глючный и будет переключаться, даже если мышь не покинула div a. Как заставить его не запускать navMouseOut, когда мышь все еще находится в div a, и почему это происходит. (пожалуйста, проверьте код, чтобы увидеть, что не так)

document.getElementById("b").onmouseover = function() {
  navMouseOver()
};
document.getElementById("a").onmouseout = function() {
  navMouseOut()
};

function navMouseOver() {
  document.getElementById("a").style = ("top: 50%;");
  document.getElementById("b").style = ("top: 40%; ");
}

function navMouseOut() {
  document.getElementById("a").style = ("top: 40%;");
  document.getElementById("b").style = ("top: 50%;");
}
#a {
  position: fixed;
  top: 40%;
  left: 20%;
  background-color: red;
}

#b {
  position: fixed;
  top: 50%;
  left: 20%;
  background-color: lightblue;
}
<div id="a">
  <p>content a</p>
</div>
<div id="b">
  <p>content b...</p>
</div>


javascript onmouseover onmouseout
person Community    schedule 04.05.2017    source источник
comment
Кроме того, вам не нужны анонимные функции для переноса вызовов других функций, просто скажите document.getElementById("b").onmouseover = navMouseOver;.   -  person nnnnnn    schedule 04.05.2017

Ответы (3)


arrow_upward
-1
arrow_downward

используйте onmouseenter вместо onmouseover

document.getElementById("b").onmouseenter = function() {
navMouseOver()
};

document.getElementById("a").onmouseout = function() {
navMouseOut()
};
person Raymond Seger    schedule 04.05.2017
comment
Вот скрипт, который показывает, как это сделать: jsfiddle.net/8ohoe1dm - person Nisarg; 04.05.2017
comment
Этот ответ был бы более полезным, если бы вы добавили объяснение. - person nnnnnn; 04.05.2017

arrow_upward
0
arrow_downward

я думаю, что проблема в распространении, давайте посмотрим на эту функцию onmouseout, даже если вы оставите мышь вне элемента P, но все еще в DIV, onmouseout все равно будет выполняться.

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

<div id="a">
  content a
</div>
<div id="b">
  content b...
</div>

или используйте stoppropagation() или cancelBubble()

person Dynamics NaN    schedule 04.05.2017

arrow_upward
0
arrow_downward

Проблема в том, что когда элементы меняют положение, события mouseover и mouseenter запускаются как элемент, который недавно был расположен на мыши. Чтобы предотвратить это, вы можете использовать флаг, который переключается с true на false, который решает, запускать ли код репозиционирования.

var target1 = document.getElementById("mouseoverTarget1");
var switching = false;
var inStartingPosition = true;

target1.addEventListener("mouseover", function() {
  if (!switching) {
    switching = true;
    target1.style.top = inStartingPosition ? "50px" : "0px";
    target2.style.top = inStartingPosition ? "-50px" : "0px";
    inStartingPosition = inStartingPosition ? false : true;
    console.log("mouseover target 1");
    setTimeout(() => {
      switching = false;
    }, 100);
  }
});

var target2 = document.getElementById("mouseoverTarget2");

target2.addEventListener("mouseover", function() {
  if (!switching) {
    switching = true;
    target1.style.top = inStartingPosition ? "50px" : "0px";
    target2.style.top = inStartingPosition ? "-50px" : "0px";
    inStartingPosition = inStartingPosition ? false : true;
    console.log("mouseover target 2");
    setTimeout(() => {
      switching = false;
    }, 100);
  }
});
#mouseoverTarget1, #mouseoverTarget2 {
  width: 50px;
  height: 50px;
  position: relative;
}

#mouseoverTarget1 {
  background-color: red;
}

#mouseoverTarget2 {
  background-color: blue;
}
<div id="mouseoverTarget1"></div>
<div id="mouseoverTarget2"></div>

person Kyle Richardson    schedule 04.05.2017
comment
Событие mouseover повторно срабатывает, пока мышь находится над элементом. Это верно только в том смысле, что оно всплывает, поэтому оно срабатывает снова, если мышь перемещается по дочерним элементам элемента. Простое нахождение над элементом не приводит к его многократному срабатыванию. Но да, mouseenter не пузырится. - person nnnnnn; 04.05.2017