Как не получить спам от событий mouseover / mouseout, когда мышь перемещается между подэлементами?

Question

Как не получить спам от событий mouseover / mouseout, когда мышь перемещается между подэлементами?

1

Лучше всего объясняется примером:

var root = document.querySelector("#a");
var msg_stack = document.querySelector("#msg_stack");
var last_msg = document.querySelector("#dummy");

function pad(v) {
  v = "" + v;
  while (v.length < 3) v = "0" + v;
  return v;
}

function hover(v) {
  var msg = document.createElement("div");
  msg.innerText = pad(msg_stack.children.length) + ": " + v;
  
  last_msg = msg_stack.insertBefore(msg, last_msg);
}

root.addEventListener("mouseover", function() { hover(true); });
root.addEventListener("mouseout", function() { hover(false); });

#a {
  position:absolute;
  left:10px;top:10px;width:200px;height:50px;
  background-color:red;
}

#b {
  position:absolute;
  right:0px;top:0px;width:50px;height:200px;
  background-color:red;
}

#b:after {
  content:"";
  position:absolute;
  left:0;top:0;height:50px;
  border-left:solid 1px blue;
}

#msg_stack {
  position:absolute;
  left:230px;top:10px;width:500px;height:200px;
}

<div id="a"><div id="b"></div></div>
<div id="msg_stack"><div id="dummy"></div></div>

Обратите внимание, что при перемещении мыши над синей рамкой, все еще находясь внутри красного цвета, он получает спам с ненужными событиями мыши/мыши.

В моем случае это дорого, на моей веб-странице у меня есть элементы, наложенные друг на друга на глубину 5, так что спам намного хуже. Каждое наведение мыши/мышь вызывает множество других вещей, и если это произойдет за 10 секунд за одну миллисекунду, это заставляет заикаться.

Я не хочу отключать события, прошедшие иерархию html (как в #b, запускающие события мыши в #a), что желательно, так как вещи, которые я отслеживаю на своей странице, также имеют странные формы.

Есть ли способ не получить спам с помощью мыши/мыши, если мышь действительно не оставила границы контролируемого элемента и его подэлементов?

Альтернативно, есть ли способ обнаружить, что другое событие (последующее наведение мыши) спускается по трубе во время обработки текущего события (mouseout)?

В настоящее время я устанавливаю переменную каждый раз, когда событие запускается, а затем тайм-аут 1 мс проверяет эту переменную, а затем запускает другие действия, которые должны выполняться при наведении мыши/мыши, но мне это не нравится.

user81993 31 июль 2018, в 00:59

Источник

Теги:

javascript

1 ответ

Ещё вопросы

Alex Wayne · Accepted Answer · 2018-07-30T20-54-00.000Z

Вы хотите, чтобы mouseenter и mouseleave а не mouseover и mouseout.

события mouseover и mouseout когда любой дочерний элемент получает или теряет мышь. mouseenter и mouseleave только тогда, когда элемент, который обрабатывает событие, сначала вводится или полностью уходит.

Здесь дополнительная информация о разнице

var root = document.querySelector("#a");
var msg_stack = document.querySelector("#msg_stack");
var last_msg = document.querySelector("#dummy");

function pad(v) {
  v = "" + v;
  while (v.length < 3) v = "0" + v;
  return v;
}

function hover(v) {
  var msg = document.createElement("div");
  msg.innerText = pad(msg_stack.children.length) + ": " + v;
  
  last_msg = msg_stack.insertBefore(msg, last_msg);
}

root.addEventListener("mouseenter", function() { hover(true); });
root.addEventListener("mouseleave", function() { hover(false); });

#a {
  position:absolute;
  left:10px;top:10px;width:200px;height:50px;
  background-color:red;
}

#b {
  position:absolute;
  right:0px;top:0px;width:50px;height:200px;
  background-color:red;
}

#b:after {
  content:"";
  position:absolute;
  left:0;top:0;height:50px;
  border-left:solid 1px blue;
}

#msg_stack {
  position:absolute;
  left:230px;top:10px;width:500px;height:200px;
}

<div id="a"><div id="b"></div></div>
<div id="msg_stack"><div id="dummy"></div></div>