Я использую встроенные твиты на своем веб-сайте, однако я хотел бы предотвратить любой тип взаимодействия пользователя с этими встроенными твитами, кроме показа их своим пользователям. Следуя здесь совету, я поместил код для вставки в {{X0} } элемент со свойством CSS pointer-events:none, как в примере ниже, тем не менее, встроенный твит в остается активным. Любые идеи, как замаскировать его невидимым НЕКЛИКОВОЧНЫМ слоем?

<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>
0
Elad Ratson 19 Фев 2020 в 18:17

2 ответа

Лучший ответ

То, что вы написали, на самом деле работает хорошо, и Chrome не отправляет на него события кликов. Но мы можем добавить eventListener, чтобы переопределить все, что может быть к нему прикреплено, и предотвратить распространение события с event.stopPropagation(). Я добавил немного CSS, чтобы отключить выделение и выделение текста.

Немного трудно продемонстрировать, что событие не запускается, но вы можете видеть, что консоль не будет регистрировать сообщение "Uh oh, I got clicked", даже если вы нажмете вокруг.

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>
2
Christian 19 Фев 2020 в 15:24

Код ниже, кажется, работает, используя ваш класс «твиттер-твит», а не div для указания событий указателя:

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

Однако, когда я запускаю код, который вы разместили, он ведет себя так же, как указано. Кажется, у вас может быть другой код, препятствующий вашим усилиям здесь. Тем не менее попробуйте добавить указатель-события: нет; вместо этого в свой твиттер-твит.

0
kevin walker 19 Фев 2020 в 16:50