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

Issue encountered with the Selenium JavaScript Chrome WebDriver

The Angular controller fails to execute upon startup in the Ionic app

Prevent the opening of tabs in selenium using Node.js

How can I use cookies to make an HTML div disappear when a button is clicked?

Exploring the function of variables in VueJS

Retrieve the latency of the interaction.reply() method

Tips for defining conditions within the style attribute in JSP

What is the best way to apply overlays to customize a specific part of a single character while also accommodating dynamic width adjustments?

Moving between different perspectives within a single-page backbone application

Customizing the layout of specific pages in NextJSIncorporating

Refresh Next.js on Navigation

Is it possible to use nodemailer locally with NodeJS? The issue is that the greeting emails are not being received

Combining strings in a JavaScript object

Exploring methods to conduct testing on an AngularJS application using AngularJS end-to-end testing, specifically focusing on scenarios involving multiple inputs

jQuery load() issue

Sending back numerous information in the catch block

Changing the text of a link when hovering - with a transition

Enhance Bootstrap typeahead to accommodate multiple values

Is there a way to make my code on Google Sheets work across multiple tabs?

Step-by-step guide on utilizing User scripts with the $window.open function in AngularJS