除了一个元素外，使整个页面不是交互式的

Question

如何让网页完全不与用户交互，但让一个div（或其他元素）互动？

Answer 1

＆＃13;

＆＃13;

#blocker {
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.2);
    z-index: 1;
}

.allow {
    position:absolute;
    padding:0;
    margin:0;

    top:50%;
    left:50%;

    background:red;
    z-index: 1;
}

＆＃13;

<p>
content to block
</p>
<div id="blocker">

</div>
<div class="allow">


<p>
Content to allow
</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只能使用pointer events来完成CSS。在pointer-events: none上设置body。在目标元素上设置pointer-events: auto。

var buttons = [].slice.call(document.getElementsByTagName('button'), 0);

buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    console.log('responds');
  });
});

body {
  pointer-events: none;
}

.respond {
  pointer-events: auto;
}

<button>I don't respond</button>

<div>
  <button class="respond">I respond</button>

  <button>I don't respond</button>

  <button>I don't respond</button>
</div>