Javascript - событие mouseover/out срабатывает на всех элементах сиблинга в то же время

Question

У меня есть четыре родственных элемента с классом «ящик». Я использую getElementsByClassName() с циклом for, чтобы перебирать соответствующий набор элементов и использовать метод addEventListener() для привязки события mouseover к каждому элементу.

Проблема я имею, когда я использую .style.display в обработчик события, и мыши на любом из согласующих элементов, все из предыдущего собрата согласующих элементов изменяют свои значения дисплея.

Если я использую другой метод стиля, например .style.backgroundColor, все работает нормально. У меня есть googled и youtubed, и я не могу найти решение. Буду признателен за любую помощь, спасибо.

Код:

function hover(eClass) { 
    var elem = document.getElementsByClassName(eClass); 
    for (var i=0;i<elem.length;i++) { 
    elem[i].addEventListener('mouseover', mouseOver); 
    elem[i].addEventListener('mouseout', mouseOut); 
    } 
    function mouseOver() {  
    //this.style.backgroundColor = 'red'; 
    this.style.display = 'none'; 
    } 
    function mouseOut() { 
    //this.style.backgroundColor = 'grey'; 
    } 
} 
hover('box'); 

Codepen example

Answer 1

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

Answer 2

Это было забавно, и потребовалось время, чтобы понять, что это просто практическая проблема. Когда вы наводите курсор на первый ящик, он удаляется, а следующий перерисовывается на своем месте. Но затем событие снова загорается на коробке 2, потому что это теперь под курсором, и поэтому он продолжается. Конечно, это происходит слишком быстро, чтобы видеть, но это то, что происходит. Если вы действительно хотите удалить элемент из функции вытягивания браузера, вы должны выяснить что-нибудь, чтобы остановить событие стрельбы на следующий элемент, или установите непрозрачность: 0.

Update

Это является своего рода уродливым, но удаление прослушивателей событий и добавление их снова демонстрирует, как это может работать. http://codepen.io/dannyjolie/pen/mPmpqE

function mouseOver() { 
    //this.style.backgroundColor = 'red'; 
    removeListeners('box'); 
    this.style.display = 'none'; 
    setTimeout(function(){ 
    addListeners('box'); 
    }, 100); 
} 

Answer 3

misher бил меня к нему, но да, что то, что происходит. Я ставлю 1 - 4 в DIV с:

<div class="container"> 
    <div class="box grey">1</div> 
    <div class="box grey">2</div> 
    <div class="box grey">3</div> 
    <div class="box grey">4</div> 
</div> 

И использовали console поймать innerHTML элементов, и они исчезают, что дало мне:

1 
2 
3 
4 

Не удивительно, там, как только display установлен на none, элементы перемещаются вверх, так как тот, который вы наведете, больше не имеет своего CSS в игре. Вы можете использовать visibility, чтобы это не происходило, но событие mouseout не будет запускаться по невидимым элементам.

С небольшим количеством настроек вы можете использовать атрибут data и событие mousemove, чтобы сохранить элементы на месте; это будет только стрелять один раз так, если страница повторно размеры или перемещает X и Y значения будут выключены, возможно, window.onresize бы исправить, но вот это:

function hover(eClass) { 
    var elem = document.getElementsByClassName(eClass); 
    for (var i = 0; i < elem.length; i++) { 
     elem[i].addEventListener('mouseover', mouseOver); 
    } 
    document.addEventListener('mousemove', mouseMove); 
    function mouseOver() { 
     var minX = this.offsetLeft; 
     var maxX = minX + this.offsetWidth; 
     var minY = this.offsetTop; 
     var maxY = minY + this.offsetHeight; 
     this.setAttribute('data-minx', minX); 
     this.setAttribute('data-maxx', maxX); 
     this.setAttribute('data-miny', minY); 
     this.setAttribute('data-maxy', maxY); 
     this.style.visibility = 'hidden'; 
    } 
    function mouseMove(e) { 
     e = e || event; 
     for(i = 0; i < elem.length; i++) { 
      var div = elem[i]; 
      var minX = div.getAttribute('data-minx'); 
      var maxX = div.getAttribute('data-maxx'); 
      var minY = div.getAttribute('data-miny'); 
      var maxY = div.getAttribute('data-maxy'); 
      if(e.clientX >= minX && e.clientX <= maxX && e.clientY >= minY && e.clientY <= maxY) { 
       // over the Div 
      } else { 
       div.style.visibility = 'visible'; 
      } 
     } 
    } 
} 

hover('box');