Предотвратить все нажатия на встроенный элемент - PullRequest
Новая
       0

Предотвратить все нажатия на встроенный элемент

0 голосов
/ 19 февраля 2020

Я использую встроенные твиты на своем веб-сайте, однако я хотел бы предотвратить любой тип взаимодействия пользователя с этими встроенными твитами, кроме показа их моим пользователям. Следуя совету здесь , я обернул код встраивания внутри элемента <div> со свойством 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>

Ответы [ 2 ]

2 голосов
/ 19 февраля 2020

То, что вы написали, на самом деле работает хорошо, и 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>
0 голосов
/ 19 февраля 2020

Кажется, что приведенный ниже код работает с использованием вашего класса "твиттер-твит", а не 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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...