CODEWITHSUNDEEP
htmlcss
Elad Ratson
Elad Ratson

Reputation: 724

Prevent all clicks on embedded element

I use embedded tweets in my website, however, I would like to prevent any type of user interaction with these embedded tweets other than showing them to my users. Following the advise here, I wrapped the embed code inside a <div> element with the CSS property pointer-events:none, as in the example below, nevertheless, the embedded tweet in the remains clickable. Any ideas how to mask it with an invisible NON-CLICKABLE layer?

<div class="right" style="display:inline-block;float:left;pointer-events:none;z-index:2">
  <blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">Or hey, ya know, just relax and have fun. <a href="https://twitter.com/U53iZEL9O9">https://twitter.com/U53iZEL9O9</a></p>&mdash; Meg Turney (@megturney) <a href="https://twitter.com/megturney/status/1230141853246402560?ref_src=twsrc%5Etfw">February 19, 2020</a></blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Upvotes: 0

Views: 641

Answers (2)

kevin walker
kevin walker

Reputation: 149

The code below seems to work using your "twitter-tweet" class rather than the div to specify pointer events:

<head>
<style>
.twitter-tweet{
pointer-events: none;
}
</style>

</head>

<body>
<div class="right" style="display:inline-block;float:left;z-index:2">
  <blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">Or hey, ya know, just relax and have fun. <a href="https://twitter.com/U53iZEL9O9">https://twitter.com/U53iZEL9O9</a></p>&mdash; Meg Turney (@megturney) <a href="https://twitter.com/megturney/status/1230141853246402560?ref_src=twsrc%5Etfw">February 19, 2020</a></blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</body>

However, when I run the code you've posted, it behaves as specified as well. It seems you may have other code preventing your efforts here. Nonetheless try adding pointer-events: none; to your twitter-tweet class instead.

Upvotes: 1

Lewis
Lewis

Reputation: 4595

What you wrote actually works well, and Chrome doesn't send click events to it. But we can add an eventListener to override anything that might be attached to it, and prevent the event from propagating with event.stopPropagation(). I added some CSS to disable text highlighting/selection as well.

It's a little hard to demonstrate an event is not firing, but you can see the console won't log the "Uh oh, I got clicked" message even if you click around.

document.querySelectorAll(".unclickable").forEach(
  element => element.addEventListener("click",
    event => {
      event.preventDefault();
      return event.stopPropagation();
    }
  )
);
.unclickable * {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
<div onclick="console.log('Uh oh, I got clicked')" class="unclickable right" style="display:inline-block;float:left;pointer-events:none;z-index:2">
  <blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">Or hey, ya know, just relax and have fun. <a href="https://twitter.com/U53iZEL9O9">https://twitter.com/U53iZEL9O9</a></p>&mdash; Meg Turney (@megturney) <a href="https://twitter.com/megturney/status/1230141853246402560?ref_src=twsrc%5Etfw">February 19, 2020</a></blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Upvotes: 2

Related Questions