Question

我有四个兄弟元素和一类“盒子”。我使用带有for循环的getElementsByClassName()迭代匹配的元素集，并使用addEventListener()方法将mouseover事件绑定到每个元素。

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

如果我使用不同的样式方法，例如.style.backgroundColor，一切正常。我用谷歌搜索你，我找不到解决方案。我将非常感谢您的帮助，谢谢。

代码：

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

我检查了你的代码。没关系。事实上，ig你试图将最后一个（在底部）方格悬停，只有它会消失。当你悬停在顶部时，它会消失，然后下一个变为顶部，所以它也会消失，依此类推，直到它们全部消失。这种情况发生得太快，并且它会立即消失所有正方形......

Answer 2

这很有趣，需要一段时间才能看出它只是一个实际问题。当您将鼠标悬停在第一个框上时，它将被删除，并在其位置重新绘制下一个框。但随后事件再次在方框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);
}

Answer 3

misher打败了我，但是这就是发生了什么。我把1 - 4放在DIV s：

中

<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元素并消失，这给了我：

毫无疑问，一旦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');

Javascript - mouseover / out事件同时触发所有兄弟元素

3 个答案: