javascript - pointer-events: none allow scroll but disable click-JSCSS

Is there a way where setting pointer-events: none can only disable the click on that container but have scroll enable on the same with an overlay.

I have fiddle: /

When I mask, using pointer-events: none, the entire container disables and when I remove this property- all events get enabled. 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>

If I understand pointer-events property correctly, it will disable all events triggered. Here I have added pointer-events to my parent/root element and all subsequent elements inside that parent gets disabled. however how can I make the parent/root DOM element listen only to scroll element?

I tried:

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

but onBodyScroll function never gets triggered.

any ideas?

Is there a way where setting pointer-events: none can only disable the click on that container but have scroll enable on the same with an overlay.

I have fiddle: https://jsfiddle/1eu6d3sq/1/

When I mask, using pointer-events: none, the entire container disables and when I remove this property- all events get enabled. 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>

I tried:

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

but onBodyScroll function never gets triggered.

any ideas?

Share Improve this question edited Oct 7, 2022 at 22:55 asked Oct 7, 2022 at 19:32 user1234 3,1596 gold badges57 silver badges117 bronze badges

The only scrollable content I can see in your fiddle is the .aaaa element, not the document - is that what you meant? – Rory McCrossan Commented Oct 7, 2022 at 19:34
@Rory McCrossan: Sorry Yes, I meant the root container. I updated my desc – user1234 Commented Oct 7, 2022 at 19:40

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

According to MDN documentation on pointer-events

Note that preventing an element from being the target of pointer events by using pointer-events does not necessarily mean that pointer event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

Keeping this in mind, re-setting pointer-events on your overflow container should enable scrolling while all other events disabled. (Forgetting 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>

Now if you want to mask, you don't really have to set any pointer-events. It should work as intended(click disabled and scroll enabled).

.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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - pointer-events: none allow scroll but disable click-JSCSS - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)