В этой статье мы узнаем, как отключить событие клика с помощью CSS.

Итак, начнем!

Как отключить событие клика с помощью CSS?

Вы можете отключить события щелчка с помощью CSS « указатели-события ' имущество. Но, углубившись в это, мы вкратце вам это объясним.

Что такое свойство CSS «pointer-events»?

“ указатели-события » управляют тем, как HTML-элементы реагируют или ведут себя на событие касания, например события щелчка или касания, активное состояние или состояние наведения, а также то, виден ли курсор или нет.

Синтаксис
Синтаксис событий-указателей следующий:

Вышеупомянутое свойство принимает два значения, например « авто ' а также ' никто ”:

• авто: Он используется для выполнения событий по умолчанию.
• никто: Он используется для отключения событий.

Примечание. В приведенном ниже примере сначала будет показано, как добавить две активные кнопки, а затем мы отключим событие нажатия второй кнопки.

Пример 1. Отключение событий нажатия кнопок с помощью CSS
В этом примере мы создадим заголовок

и две кнопки. Далее укажите « кнопка ” в качестве имени класса первой кнопки и назначьте “ кнопка ' а также ' кнопка2 ” как классы второй кнопки.

HTML

< див >
< h1 > Отключить событие клика с помощью CSS < / h1 >
< кнопка учебный класс знак равно 'кнопка' > Кнопка включения < / кнопка >
< кнопка учебный класс знак равно 'кнопка кнопка2' > Кнопка отключения < / кнопка >
< / див >

В CSS « .кнопка ” используется для доступа к обеим кнопкам, созданным в файле HTML. Затем установите стиль границы как « никто » и укажите отступы как « 25 пикселей ». После этого установите цвет текста кнопки как « RGB(29, 6, 31) », а фон кнопки как « RGB(19, 192, 163) ». Мы также установим радиус кнопки как « 5 пикселей ».

CSS

.кнопка {
граница : никто ;
набивка : 25 пикселей ;
цвет : RGB ( 29 , 6 , 31 ) ;
фоновый цвет : RGB ( 19 , 192 , 163 ) ;
радиус границы : 5 пикселей ;
}

После этого мы применим псевдокласс :active к обеим кнопкам как « .кнопка: активная ” и установите цвет кнопки как “ RGB(200, 255, 0) ”:

.кнопка : активный {
фоновый цвет : RGB ( 209 , 65 , 65 ) ;
}

В результате вы увидите следующий результат:

Теперь мы перейдем к следующей части, в которой мы отключим событие нажатия для второй кнопки.

Для этого используйте « .кнопка2 », чтобы получить доступ ко второй кнопке, созданной в файле HTML, и после этого установите значение свойства pointer-events как « никто ”:

.кнопка2 {
указатели-события : никто ;
}

Использование свойства pointer-events и установка для него значения non отключит событие щелчка, что можно увидеть в следующем выводе:

Мы предоставили самый простой способ отключения события клика с помощью CSS.

Вывод

Чтобы отключить событие клика в HTML, « указатели-события используется свойство CSS. Для этого добавьте элемент HTML и установите значение свойства pointer-events как « никто », чтобы отключить его событие щелчка. В этой статье объясняется, как отключить событие клика с помощью CSS вместе с его примером.