Prevent all clicks on embedded element

Question

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>

There are other answers on the linked question with advice on JavaScript to add... — Heretic Monkey, Feb 19 '20 at 15:20
indeed but those answers are fro IE and Opera. My problem is uniquely with Chrome — Elad Ratson, Feb 19 '20 at 15:27
The answers are not specific to any browser. And indeed, the answers suggest the same thing as the answer given to this question. — Heretic Monkey, Feb 19 '20 at 15:32

score 2 · Accepted Answer · answered Feb 19 '20 at 15:24

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>

tried... the embedded tweets are still clickable :-( https://sane.social/testing.php?account=EladRatson — Elad Ratson, Feb 19 '20 at 15:43

kevin walker · Answer 2 · 2020-02-19T16:50:33.143

1

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.

edited Feb 19 '20 at 16:50

answered Feb 19 '20 at 15:51

kevin walker

149
7

"it works" is never an answer. At best it's a comment – j08691 Feb 19 '20 at 16:47
The post outlines modifications to the current code which may yield the desired result. A bit more than "it works". – kevin walker Feb 19 '20 at 16:52
i don't have a class .twitter-tweet in my stylesheet... I think this class is loaded by Twitter's widget.js as part of the embed...? – Elad Ratson Feb 19 '20 at 17:29
try adding the class to the head of your page. Should inherit previous style from widget.js and apply forward your pointer-events: none; – kevin walker Feb 20 '20 at 14:44

Prevent all clicks on embedded element

2 Answers2