javascript - 使用 "pointer-event: none"时不遵守 "margin: auto"

Question

我有一个网页，我希望我的内容在页面上居中对齐，每当用户将鼠标悬停在内容之外的页面上时，我希望页面背景改变颜色。如果我移动 .content div 并返回 .background div 它应该改变 .background div 颜色。

在下面的代码中，如果您将鼠标移离 content div 的底部或顶部，效果会很好。如果您将鼠标从 content div 向左或向右移动，则不会触发 mouseover 事件监听器。看起来它可能是浏览器实现 pointer-events 的错误，或者我做错了什么。任何帮助将不胜感激。

function changeColor(event) {
    event.currentTarget.style.backgroundColor = ('#' + Math.floor(Math.random() * 16777215).toString(16));
}
var el = document.querySelector(".background");
el.addEventListener("mouseover", changeColor, false);
el.addEventListener("click", changeColor, false);

.content {
    width: 300px;
    margin: auto;
    pointer-events: none;
}
.content > div {
    border: 1px solid black;
    background-color: grey;
    pointer-events: auto;
}
.background {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: -1;
    background: green
}

<div class="content">
    <div>
        <p>Proin hendrerit ullamcorper justo in facilisis. Nullam id efficitur neque, id iaculis enim. Duis imperdiet nisl sed vulputate interdum. Vivamus hendrerit nisi dolor, sit amet pellentesque risus vulputate nec. Proin finibus quam iaculis varius egestas. Nunc volutpat mauris at dolor venenatis semper. Phasellus quis vestibulum ante. In ac dolor placerat, dapibus nulla ut, ultrices lorem. Ut elementum ex quis ligula blandit, eu mollis ipsum porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras scelerisque, metus ac hendrerit hendrerit, mauris ex cursus neque, in placerat neque risus congue risus. Proin tincidunt, purus efficitur tempor tempus, nisi ex posuere ante, sit amet suscipit quam nisl non risus. Praesent viverra quam viverra arcu faucibus suscipit.</p>               
    </div>
</div>
<div class="background">
</div>

Answer 1

因为 .content div 自动成为 block 元素，所以内容在 mouseover 的左侧和右侧覆盖整行 (100%):

function changeColor(event) {
    event.currentTarget.style.backgroundColor = ('#' + Math.floor(Math.random() * 16777215).toString(16));
}
var el = document.querySelector(".background");
el.addEventListener("mouseover", changeColor, false);
el.addEventListener("click", changeColor, false);

body {
  pointer-events: none;
}

.content {
  width: 300px;
  margin: auto;
  pointer-events: none;
}

.content>div {
  border: 1px solid black;
  background-color: grey;
  pointer-events: auto;
}

.background {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: -1;
  background: green;
  pointer-events: auto;
}

<div class="content">
    <div>
        <p>Proin hendrerit ullamcorper justo in facilisis. Nullam id efficitur neque, id iaculis enim. Duis imperdiet nisl sed vulputate interdum. Vivamus hendrerit nisi dolor, sit amet pellentesque risus vulputate nec. Proin finibus quam iaculis varius egestas. Nunc volutpat mauris at dolor venenatis semper. Phasellus quis vestibulum ante. In ac dolor placerat, dapibus nulla ut, ultrices lorem. Ut elementum ex quis ligula blandit, eu mollis ipsum porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras scelerisque, metus ac hendrerit hendrerit, mauris ex cursus neque, in placerat neque risus congue risus. Proin tincidunt, purus efficitur tempor tempus, nisi ex posuere ante, sit amet suscipit quam nisl non risus. Praesent viverra quam viverra arcu faucibus suscipit.</p>               
    </div>
</div>
<div class="background">
</div>