pointer-events: 沒有允許滾動但禁用 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 function 永遠不會被觸發。

有任何想法嗎？

Answer 1

根據MDN關於pointer-events文檔

請注意，通過使用指針事件防止元素成為指針事件的目標並不一定意味着該元素上的指針事件偵聽器不能或不會被觸發。 如果元素的一個子元素明確設置了指針事件以允許該子元素成為指針事件的目標，那么任何以該子元素為目標的事件都將在事件沿着父鏈傳播時通過父元素，並觸發事件監聽器父母視情況而定。 當然，在屏幕上被父級覆蓋但未被子級覆蓋的點上的任何指針活動都不會被子級或父級捕獲（它將 go “通過”父級並定位下面的任何內容）。

請牢記這一點，在您的溢出容器上重新設置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>