Javascript-mouseover/out事件同时在所有同级元素上触发

Javascript - mouseover/out event fires on all sibling elements at the same time

本文关键字：元素 out 事件 Javascript-mouseover      更新时间：2023-09-26

我有四个同级元素，类为"box"。我使用带有for循环的getElementsByClassName()来迭代匹配的元素集，并使用addEventListener()方法将mouseover事件绑定到每个元素。

我遇到的问题当我在事件处理程序中使用.style.display，并将鼠标悬停在任何匹配元素上时，所有前面的同级匹配元素都会更改其显示值。

如果我使用不同风格的方法，比如.style.backgroundColor，一切都很好。我在谷歌和youtube上搜索过，找不到解决方案。我将感谢所有的帮助，谢谢。

代码：

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');

代码笔示例

我检查了您的代码。很好。事实上，ig你试图悬停在最后一个（底部）方块上，只有它会消失。当你悬停在最上面的一个时，它会消失，下一个会变成最上面的，所以它也会消失，以此类推，直到它们都消失。这种情况发生得太快了，所有方块都会同时消失。。。

这很有趣，花了一段时间才发现这只是一个实际问题。当您将鼠标悬停在第一个框上时，它将被删除，下一个框将在其位置重新绘制。但随后事件在框2上再次触发，因为它现在位于光标下方，因此它继续。当然，这种情况发生得太快了，看不见，但这就是发生的事情。如果你真的想从浏览器的绘图功能中删除该元素，你必须想办法阻止事件在下一个元素上触发，或者设置不透明度：0。

更新

这有点难看，但删除事件侦听器并再次添加它们说明了是如何工作的。http://codepen.io/dannyjolie/pen/mPmpqE

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

misher打败了我，但是的，这就是正在发生的事情。我在DIVs:中放入了1-4

<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');
相关文章：