指针事件：不允许滚动但禁用 click-JS/CSS

Question

有没有一种方法可以设置pointer-events: none只能禁用该容器上的单击，但可以使用覆盖层启用滚动。

我有小提琴： https: //jsfiddle.net/1eu6d3sq/1/

当我使用 屏蔽时pointer-events: none，整个容器将被禁用，而当我删除此属性时，所有事件都会被启用。CSS：

   .parent {
  position: relative;
  pointer-events: none; /* if I remove this the scrolling works and click is also enabled. if I add this, scrolling and click both get disabled */
}
    
.button {cursor: pointer}
.main {    
  height: 80px;
  overflow: auto;
}
    
.mask {
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: default;
  height: 100%;
}

HTML：

 <div class="parent"><div class="main">

      <div class="aaaa">
      Some masked contentThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome ontents above
      </div>
      <div>This is some text covered by the mask</div>
      <div>
      <span onclick="function hi(){alert('Hi!')};hi()">clicked SAPN</span>
      </div>
      <button class="button">
         <span class="span-button">OK</span>
      </button>
      <div class="mask" style="background-color: rgba(255, 255, 255, 0.7);">
        <div>
            <div>
              Some contents above the mask
            </div>
        </div>
      </div>
</div>
</div>

如果我pointer-events正确理解属性，它将禁用所有触发的事件。在这里，我已添加pointer-events到我的父/根元素，并且该父元素内的所有后续元素都被禁用。但是如何让父/根 DOM 元素只监听滚动元素呢？

我试过：

window.addEventListener("scroll", this.onBodyScroll, true);

但onBodyScroll函数永远不会被触发。

有任何想法吗？

Answer 1

根据MDN文档pointer-events

请注意，通过使用指针事件防止元素成为指针事件的目标并不一定意味着该元素上的指针事件侦听器不能或不会被触发。如果元素的子元素之一明确设置了指针事件以允许该子元素成为指针事件的目标，则当事件沿着父链传播时，任何针对该子元素的事件都将通过父元素，并触发父元素上的事件侦听器。父母酌情。当然，屏幕上某个点上被父项覆盖但不被子项覆盖的任何指针活动都不会被子项或父项捕获（它将“穿过”父项并瞄准下面的任何内容）。

记住这一点，重新设置pointer-events溢出容器应该启用滚动，同时禁用所有其他事件。（忘记了mask）

.main {
  position: relative;
  /* if I remove this the scrolling works and click is also enabled. if I add this, scrolling and click both get disabled */
  pointer-events: none;
}

.button {
  cursor: pointer
}

.aaaa {
  height: 80px;
  overflow: auto;
  pointer-events: auto;
}


/* .mask {
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: default;
  height: 100%;
} */

<div class="main">
  <div class="aaaa">
    Some masked contentThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents above
  </div>
  <div>This is some text covered by the mask</div>
  <div>
    <span onclick="function hi(){alert('Hi!')};hi()">clicked SAPN</span>
  </div>
  <button class="button">
           <span class="span-button">OK</span>
        </button>
  <!-- <div class="mask" style="background-color: rgba(255, 255, 255, 0.7);">
          <div>
              <div>
                Some contents above the mask
              </div>
          </div>
        </div> -->
</div>

现在，如果您愿意mask，您实际上不必设置任何内容pointer-events。它应该按预期工作（单击禁用并启用滚动）。

.main {
  position: relative;
  /* if I remove this the scrolling works and click is also enabled. if I add this, scrolling and click both get disabled */
  pointer-events: none;
}

.button {
  cursor: pointer
}

.aaaa {
  height: 80px;
  overflow: auto;
  pointer-events: auto;
}

.mask {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: default;
  height: 100%;
}

<div class="main">
  <div class="aaaa">
    Some masked contentThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents above
  </div>
  <div>This is some text covered by the mask</div>
  <div>
    <span onclick="function hi(){alert('Hi!')};hi()">clicked SAPN</span>
  </div>
  <button class="button">
            <span class="span-button">OK</span>
        </button>
  <div class="mask" style="background-color: rgba(255, 255, 255, 0.7);">
    <div>
      <div>
        Some contents above the mask
      </div>
    </div>
  </div>
</div>