Question

我创建了一个10px div的网格，并为每个div附加了一个mouseover监听器。在Chrome中，当我使用鼠标指针从底部输入div时，事件监听器不会被触发，直到我在div的一半左右。如果我使div更大或者我使用Firefox，就不会发生这种情况。为什么Chrome中的小div会发生这种情况？

<!DOCTYPE html>
<html>
<head>
<script>

window.onload = function() {

    for(var row = 0; row < 10; row++) {

        var rowDiv = document.createElement("div");
        rowDiv.style.lineHeight = 0;

        for(var col = 0; col < 10; col++) {

            var cellDiv = document.createElement("div");
            cellDiv.style.height = "10px";
            cellDiv.style.width = "10px";
            cellDiv.style.display = "inline-block";
            cellDiv.style.backgroundColor = "green";
            rowDiv.appendChild(cellDiv);
            cellDiv.onmouseover = (function(cell) {
                return function() {
                    cell.style.backgroundColor = "yellow";
                };
            })(cellDiv);
        }
        document.getElementById("container").appendChild(rowDiv);
    }
}
</script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

Answer 1

将style.lineHeight设置为0是这里的问题，但这是必要的。但是，有一种方法可以解决它所创建的问题。

首先，让我快速概述一下原始情况。我有一个div网格，我想让所有相邻的div相互接触。我还想在所有div上使用单独的鼠标事件监听器。为了使行div（各个div的容器）相互接触，我将它们的行高设置为0.这使得鼠标事件监听器仅在每个div的上半部分工作时产生了不幸的影响（除了最底行的那些。）

溢出属性修复了这个问题。只需为每个div div设置overflow to hidden，鼠标事件监听器就可以在div的整个区域内工作。

<!DOCTYPE html>
<html>
<head>
<script>

window.onload = function() {

    for(var row = 0; row < 10; row++) {

        var rowDiv = document.createElement("div");
        rowDiv.style.lineHeight = 0;
        rowDiv.style.overflow = "hidden";

        for(var col = 0; col < 10; col++) {

            var cellDiv = document.createElement("div");
            cellDiv.style.height = "10px";
            cellDiv.style.width = "10px";
            cellDiv.style.display = "inline-block";
            cellDiv.style.backgroundColor = "green";
            rowDiv.appendChild(cellDiv);
            cellDiv.onmouseover = (function(cell) {
                return function() {
                    cell.style.backgroundColor = "yellow";
                };
            })(cellDiv);
        }
        document.getElementById("container").appendChild(rowDiv);
    }
}
</script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

onmouseover事件不适用于Chrome中的整个div

1 个答案: