javascript - 鼠标悬停事件冒泡问题

Question

我正在编写一些纯 Javascript，需要我逐行动态地将元素添加到 flex 容器中。令我惊讶的是，我的 mouseover 事件在行中传播并触发了其他子项，尽管它不应该这样做。下面是我的代码:

function drawChildren() {
    var size = Math.floor(containerSize / childSize);
    var counter = 1;
    var parent = document.getElementById(parentId);
    for(var rowCount = 1; rowCount <= size ; rowCount ++) {
      var row = document.createElement('div');
      row.id = `${parentId}-rowDiv-${rowCount} `;
      row.setAttribute('style', `
        height: ${childSize}px;
        width: ${containerSize}px;
        display: flex; 
        flex-direction:row; `);
      for(var child = 1; child <= size ; child ++) {
        var childDiv = document.createElement('div');
        childDiv.id = `${parentId}-childDiv-${counter}`;
        childDiv.setAttribute('style',`
            height: ${childSize}px;
          width: ${childSize}px; 
          background-color: ${getRandomColor()};`);
          
        childDiv.addEventListener("mouseover", onMouseOver);  
        childDiv.addEventListener("mouseleave", onMouseLeave);
        row.appendChild(childDiv);
        counter ++;
      }
      parent.appendChild(row);
    }

onmouseover ，我调用了下面的函数:

function onMouseOver(e) {
    e.stopPropagation();
    document.getElementById(e.target.id).style.display = 'none';
    console.log(e.target.id);
  }

问题是，每当我在对象上mouseover 时，它都会传播到该行并为同一行上的所有其他元素触发mouseover 事件。它也一次发射一个。我试图通过添加 js stopPropagation() 属性来停止传播，但没有任何改变。请问这是什么原因造成的，我该如何解决？任何帮助将不胜感激。

Answer 1

在删除用于获取 size 和 parentId 变量的语法(我猜这是来自 JSP)之后，JS 逻辑工作得很好。问题可能是使用的反引号 (`)。

或

您指的是悬停在该行的第一个子项上会隐藏整行的问题。

在这里，display:none; 将是罪魁祸首，您可以改用 visibility: hidden;。

display: none; 将从布局中删除该元素，释放其从布局中占用的空间，从而允许下一个元素占用其空间。在这个问题中，将鼠标悬停在第一个 child 上可以释放现在由第二个元素占用的空间。由于您的鼠标仍位于同一位置，它现在将删除第二个元素并继续循环。

visibility: hidden; 仅隐藏元素，同时保留其在页面布局中的空间。

这是您的代码的工作片段(带有 display: none; 和 visibility : hidden;):

var containerSize = 200,
  childSize = 50;

function onMouseOverDisplay(e) {
  e.stopPropagation();
  document.getElementById(e.target.id).style.display = 'none';
  console.log(e.target.id);
}

function onMouseOverVisibility(e) {
  e.stopPropagation();
  document.getElementById(e.target.id).style.visibility = 'hidden';
  console.log(e.target.id);
}

function setAttr(elem, attrs) {
  for (var attr in attrs) {
    if (attrs.hasOwnProperty(attr)) {
      elem.setAttribute(attr, attrs[attr]);
    }
  }
}

function drawChildren(parentId) {
  var size = Math.floor(containerSize / childSize),
    parent = document.getElementById(parentId),
    counter = 1,
    rowCount, childCount, row, childDiv;

  for (rowCount = 1; rowCount <= size; rowCount++) {
    row = document.createElement('div');
    row.id = parentId + "-rowDiv-" + rowCount;
    row.setAttribute('style', "height: " + childSize + "px; width: " + containerSize + "px; display: flex; flex-direction: row;");
    for (childCount = 1; childCount <= size; childCount++) {
      childDiv = document.createElement('div');
      childDiv.id = parentId + "-childDiv-" + rowCount + "-" + childCount;
      childDiv.setAttribute('style', "height: " + childSize + "px; width: " + childSize + "px; background-color: cyan; border: 1px solid red;");

      if (parentId === 'tab-display') {
        childDiv.addEventListener("mouseover", onMouseOverDisplay);
      } else if (parentId === 'tab-visibility') {
        childDiv.addEventListener("mouseover", onMouseOverVisibility);
      }

      // childDiv.addEventListener("mouseleave", onMouseLeave);
      row.appendChild(childDiv);
      counter++;
    }
    parent.appendChild(row);
  }
}

drawChildren('tab-display');
drawChildren('tab-visibility');

<h2>Using Display None</h2>
<div id="tab-display"></div>

<h2>Using Visibilty Hidden</h2>
<div id="tab-visibility"></div>