Preventing click events with pointer-events property in CSS while still allowing scrolling

Question

Preventing click events with pointer-events property in CSS while still allowing scrolling

Is there a way to use pointer-events: none to disable click events on a specific container while still allowing scroll functionality and an overlay?

You can view my fiddle here: https://jsfiddle.net/1eu6d3sq/1/

Currently, when I apply pointer-events: none to the container, it disables all events. When I remove this property, all events are enabled.

Here is the CSS code:

.parent {
  position: relative;
  pointer-events: none; 
}
    
.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%;
}

And the HTML:

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

I am trying to find a way to make the parent DOM element only listen to scroll events instead of disabling all events with pointer-events.

I attempted adding an event listener for scroll but the function does not get triggered.

Any suggestions?

javascript html css

Answer 1

Answer №1

As per the documentation provided by MDN regarding the use of pointer-events

It's important to note that setting an element to not be the target of pointer events using pointer-events does not guarantee that pointer event listeners on that element will not be triggered. If a child element has pointer-events explicitly set to allow it to be the target of pointer events, then any events targeting that child will pass through the parent as the event moves along the parent chain, triggering event listeners on the parent if necessary. However, if pointer activity occurs at a point on the screen covered by the parent but not the child, neither the child nor the parent will capture the event (it will go "through" the parent and target whatever lies underneath).

Keeping this in mind, resetting the pointer-events on your overflow container should enable scrolling while disabling all other events. (excluding mask)

.main {
  position: relative;
  /* if I remove this, scrolling works and click is also enabled. If I add this, both scrolling and clicking are 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>

If you wish to use a mask, there's no need to specify any pointer-events. It should function as expected (disabling clicks and enabling scrolling).

.main {
  position: relative;
  /* if I remove this, scrolling works and click is also enabled. If I add this, both scrolling and clicking are 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>

Answer 2

As per the documentation provided by MDN regarding the use of pointer-events

It's important to note that setting an element to not be the target of pointer events using pointer-events does not guarantee that pointer event listeners on that element will not be triggered. If a child element has pointer-events explicitly set to allow it to be the target of pointer events, then any events targeting that child will pass through the parent as the event moves along the parent chain, triggering event listeners on the parent if necessary. However, if pointer activity occurs at a point on the screen covered by the parent but not the child, neither the child nor the parent will capture the event (it will go "through" the parent and target whatever lies underneath).

Keeping this in mind, resetting the pointer-events on your overflow container should enable scrolling while disabling all other events. (excluding mask)

.main {
  position: relative;
  /* if I remove this, scrolling works and click is also enabled. If I add this, both scrolling and clicking are 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>

If you wish to use a mask, there's no need to specify any pointer-events. It should function as expected (disabling clicks and enabling scrolling).

.main {
  position: relative;
  /* if I remove this, scrolling works and click is also enabled. If I add this, both scrolling and clicking are 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>

Preventing click events with pointer-events property in CSS while still allowing scrolling

Answer №1

Similar questions

Evaluating Vue with AVA - The key is in the whitespace

The Stepper StepIconComponent prop in MUI is experiencing issues when trying to render styles from the styles object, leading to crashes in the app

Develop a "Read More" button using Angular and JavaScript

What are some techniques for disguising text on a website to give the illusion of being in English but is actually impossible to read

Troubleshooting the issue with a styled subcomponent in React using Styled Components

Unforeseen issue within Vuejs-nuxt (SSR Mode) is preventing the retrieval of the UserUUID through the getter in plugins, resulting in an unexpected '

Ways to showcase an array with HTML content in AngularJS without using ng-repeat

The `d-flex flex-column` is causing the image within the div to be hidden

Generate slanted projection mapboxgl

Using CSS3 to shift a div in relation to another moving div

Error Encountered: Module Not Located

Exploring the mechanics of an Ajax call

The seamless flow of web design

URL validation RegEx in AngularJs using Javascript

Update all items in the menu to be active, rather than only the chosen one

Gallery of Disappearing Images

What is the best way to display a message on the 403 client side when an email sending fails?

What is the process to replace the image in these templates?

Is there a way to customize the dot in a JavaFx RadioButton?

Ways to retrieve a converted document using the Microsoft Graph API