Запретить нажатие на div
@АндрейЗахаров, так работает, вы вообще как проверяете? посмотрите инспектором после клика на контейнер.
15 авг 2018 в 5:16
jsfiddle.net/gyujxzoc/2 вот, посмотрите
15 авг 2018 в 5:21
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Извиняюсь, тут после правки заработал, скорее у меня конфликт где то
var container = document.getElementById('mycontainer'); function clickDiss()
Test Там сверху должен блокировать (button и input например) после нажатия btn, а почему-то не работает(((
Отслеживать
ответ дан 15 авг 2018 в 5:26
372 3 3 серебряных знака 18 18 бронзовых знаков
- javascript
- html
- css
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
HTMLElement.click()
Метод HTMLElement.click() имитирует клик мышкой по элементу.
Syntax
element.click()
Спецификации
| Specification |
|---|
| HTML Standard # dom-click-dev |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Псевдоклассы, псевдоэлементы
Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.
| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
|---|---|
| Цель: | Узнать о селекторах псевдокласса и псевдоэлемента. |
Что такое псевдокласс?
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.
Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:
:pseudo-class-name
Простой пример псевдокласса
Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:
Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса :first-child — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)
Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:
Примечание: Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для , не только к первому дочернему абзацу — :first-child равнозначно *:first-child . Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.
Псевдоклассы пользовательского действия
Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:
- :hover — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
- :focus — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.
Что такое псевдоэлемент?
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия :: .
::pseudo-element-name
Примечание: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.
Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.
Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.
Он действует так, как если бы волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.
Вы можете видеть, что селектор выбирает первую строку обоих абзацев.
Объединение псевдоклассов и псевдоэлементов
Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line . Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента
, который находится внутри элемента .
article p:first-child::first-line font-size: 120%; font-weight: bold; >
Генерация контента с помощью ::before и ::after
Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.
Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства content и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.
Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.
В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block , чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.
Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется «генерируемым контентом» в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов ::before и ::after . Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство content , чтобы увидеть, что добавляется в документ..
Справочный раздел
Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.
Псевдоклассы
| Селектор | Описание |
|---|---|
| :active | Подходит, когда пользователь активирует (например, щёлкает мышью) элемент. |
| :any-link | Соответствует как состоянию :link, так и состоянию :visited ссылки. |
| :blank | Соответствует элементу , для которого значение ввода является пустым. |
| :checked | Соответствует переключателю или флажку в выбранном состоянии. |
| :current (en-US) | Соответствует элементу или предку элемента, который в данный момент отображается. |
| :default | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов. |
| :dir | Выбирает элемент на основе его направленности (значение атрибута HTML dir (en-US) или свойства CSS direction ). |
| :disabled | Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии. |
| :empty | Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела. |
| :enabled | Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии. |
| :first | В постраничном носителе соответствует первой странице. |
| :first-child | Соответствует элементу, который является первым среди других дочерних элементов одного предка. |
| :first-of-type | Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка. |
| :focus | Соответствует элементу, имеющему фокус. |
| :focus-visible | Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю. |
| :focus-within | Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус. |
| :future (en-US) | Соответствует элементам после текущего элемента. |
| :hover | Соответствует элементу, на который наведён курсор мыши. |
| :indeterminate | Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно checkboxes (en-US) . |
| :in-range | Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона. |
| :invalid | Соответствует элементу, например , в недопустимом состоянии. |
| :lang | Соответствует элементу, основанному на языке (значение атрибута HTML lang). |
| :last-child | Соответствует элементу, который является последним среди других дочерних элементов одного предка. |
| :last-of-type | Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка. |
| :left | В постраничном носителе соответствует левосторонним страницам. |
| :link | Соответствует непосещавшимся ссылкам. |
| :local-link (en-US) | Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ. |
| :is() | Соответствует любому селектору из полученного списка селекторов. |
| :not | Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору. |
| :nth-child | Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| :nth-of-type | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы
) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| :nth-last-child | Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| :nth-last-of-type | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы
), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| :only-child | Соответствует элементу, являющемуся единственным дочерним для своего предка. |
| :only-of-type | Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка. |
| :optional | Соответствует необязательным элементам формы. |
| :out-of-range | Соответствует элементу с диапазоном, когда его значение находится вне диапазона. |
| :past (en-US) | Соответствует элементам перед текущим элементом. |
| :placeholder-shown | Соответствует элементу input, который показывает текст-заполнитель. |
| :playing (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «воспроизводится». |
| :paused (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «приостановлен». |
| :read-only | Соответствует элементу, который не может быть изменён пользователем. |
| :read-write | Соответствует элементу, который может быть изменён пользователем. |
| :required | Соответствует обязательным элементам формы. |
| :right | В постраничном носителе соответствует правосторонним страницам. |
| :root | Соответствует элементу, который является корнем документа. |
| :scope (en-US) | Соответствует любому элементу, который является элементом области видимости. |
| :valid | Соответствует элементу, такому как , в допустимом состоянии. |
| :target | Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment). |
| :visited | Соответствует посещённым ссылкам. |
Псевдоэлементы
- Назад
- Обзор: Building blocks
- Далее
В этом модуле
- Каскад и наследование
- Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
- Модель коробки
- Фон и границы
- Обработка разных направлений текста
- Переполнение содержимого
- Значения и единицы измерения
- Изменение размеров в CSS
- Элементы изображений, форм и медиа-элементы
- Стилизация таблиц
- Отладка CSS
- Организация вашей CSS (en-US)(en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Как запретить клик по элементу css
Я хотел бы отключить onclick событие с CSS. Возможно?
Допустим, у меня есть
и добавить класс «отключен»
Я хотел бы отключить событие onclick для этого элемента, поэтому onclick=»btnCopy(this);» не будет активным.
и на удалении «отключен» класс
это вернется к норме, так что onclick мероприятие будет активным.
10 ответов
добавьте Javascript в свой btnCopy функция для проверки, если параметр-элемент имеет disabled класс или нет.
использование CSS для изменения поведения JavaScript невозможно. CSS предназначен для стилизации HTML-элементов, JavaScript — для обработки поведения событий и сайта. CSS и JavaScript-это две совершенно разные вещи. единственное, что возможно с CSS, — это запретить пользователю нажимать на вход (например, кнопку). С помощью решения CSS, вы не отключаете код в событии onclick. Вы только отключаете возможность пользователя запускать событие onclick.
тем не менее, есть много способов изменить материал на странице (используя еще больше JavaScript или с некоторыми плагинами для Вашего браузера), что может позволить нажать на кнопку, несмотря на ваш псевдоэлемент CSS. Вот почему использование CSS для этого не рекомендуется.
Использование css-свойства pointer-events
Это может показаться удивительным, но существует css-атрибут pointer-events, который позволяет, например, выключить все события, которые можно вызвать на элементе нажатием мышки (или пальцем):
Да, отключить обработку событий при помощи css. Поддерживается всеми нормальными браузерами. Один из примеров использования: есть оверлэй поверх все страницы, и всё ещё хочется что бы элементы под оверлеем реагировали на нажатия как будто оверлея нет. На сайте MDM очень хорошо расписаны различные значения и особенности использования pointer-events.
Мы рассказываем, как стать более лучшим разработчиком, как поддерживать и эффективно применять свои навыки. Информация о вакансиях и акциях эксклюзивно для более чем 8000 подписчиков. Присоединяйся!
Как отключить нажатие внутри div
По многим причинам мне нужно отключить щелчок на определенном контенте внутри элемента div . Например, из-за кликов по рекламе. Я все еще хочу, чтобы это было видно, хотя.
Рассмотрим следующий фрагмент: —
Как отключить возможности левого щелчка в этом div ?
6 ответов
Свойство CSS, которое можно использовать:
ВАЖНО! Имейте в виду, что это свойство не поддерживается Opera Mini и IE 10 и ниже (включительно). Для этих браузеров необходимо другое решение.
МЕТОД jQuery Если вы хотите отключить его с помощью скрипта, а не свойства CSS, они могут вам помочь: Если вы используете jQuery версии 1.4.3+:
- Ссылка от: jquery — отключить клик
Вы можете повторно включить клики с помощью pointer-events: auto; (Документация)
Обратите внимание, что pointer-events переопределяет cursor , поэтому, если вы хотите, чтобы курсор был быть чем-то отличным от стандартного , ваш css должен быть помещен после pointer-events .
Как отключить щелчок по другому элементу div, пока не закроется первый всплывающий элемент div
Если вы используете функцию onclick DIV, а затем хотите отключить ее, нажмите еще раз, вы можете использовать это:
Вы можете использовать CSS
Или Используя JavaScript предотвратить событие
Если вы хотите это в чистом CSS:
Добавление выше указанного HTML-элемента предотвратит все варианты щелчка, состояния и курсора.
: disabled , : enabled
Псевдоклассы : disabled и : enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.
Пример
Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled . Его проставляют, как правило, при помощи JavaScript. Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс : disabled .
Кнопка будет полупрозрачной:
Псевдокласс : enabled наоборот поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: . input = . input : enabled .
Как пишется
Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled .
Как это понять
Браузер ориентируется на атрибут disabled и в зависимости от его наличия или отсутствия добавляет элементу состояние enabled — доступен, или disabled — недоступен.
Подсказки
�� Даже если дизайнер забыл про неактивное состояние, обязательно прописывайте его в стилях, чуть приглушая фоновый цвет или делая элемент полупрозрачным — чтобы пользователь точно знал, что с этим элементом взаимодействовать нельзя.
�� enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора . input , вы закрываете сценарий с активным элементом.
На практике
Алёна Батицкая
�� «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом disabled , потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс disabled .
Похожие публикации:
- Как опустить footer в самый низ css
- Как отключить кэширование css на сайте
- Что выбрать arduino или raspberry
- Что лучше css v34 или css v91