Запрет на клик css

pointer-events

Свойство CSS pointer-events устанавливает, при каких обстоятельствах (если таковые имеются) конкретный графический элемент может стать целью событий указателя.

Try it

Syntax

/ * Значения ключевых слов * / pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; / * Только SVG * / pointer-events: visibleFill; / * Только SVG * / pointer-events: visibleStroke; / * Только SVG * / pointer-events: visible; / * Только SVG * / pointer-events: painted; / * Только SVG * / pointer-events: fill; / * Только SVG * / pointer-events: stroke; / * Только SVG * / pointer-events: all; / * Только SVG * / / * Глобальные значения * / pointer-events: inherit; pointer-events: initial; pointer-events: revert; pointer-events: revert-layer; pointer-events: unset;

Свойство pointer-events указывается как одно ключевое слово, выбранное из списка значений ниже.

Values

Элемент ведет себя так, как если бы не было указано свойство pointer-events . В содержимом SVG это значение и значение visiblePainted имеют одинаковый эффект.

Элемент никогда не является целью событий указателя; однако события указателя могут быть нацелены на его дочерние элементы, если у этих потомков есть pointer-events установленные на какое-то другое значение. В этих обстоятельствах события указателя будут запускать прослушиватели событий для этого родительского элемента по мере необходимости на их пути к / от потомка во время фаз захвата / пузыря событий .

Только SVG (экспериментально для HTML)

Только SVG (экспериментальный для HTML). Элемент может быть целью события указателя только в том случае, если для свойства visibility установлено значение visible и, например, когда курсор мыши находится над внутренней частью (т. Е. «Заливка») элемента, а для свойства fill установлено значение, отличное от none , или когда курсор мыши находится над периметром (т. е. «штрихом») элемента, а для свойства stroke установлено значение, отличное от none .

Только SVG. Элемент может быть целью события указателя, только если для свойства visibility установлено значение visible и когда, например, курсор мыши находится над внутренней частью (т. Е. Заливкой) элемента. Значение свойства fill не влияет на обработку событий.

Только SVG. Элемент может быть целью события указателя только в том случае, если для свойства visibility установлено значение visible и, например, когда курсор мыши находится над периметром (т. Е. Штрихом) элемента. Значение свойства stroke не влияет на обработку событий.

Только SVG (экспериментальный для HTML). Элемент может быть целью события указателя, когда для свойства visibility установлено значение visible и, например, курсор мыши находится либо над внутренней частью (например, заливка), либо над периметром (например, обводка) элемента. Значения fill и stroke не влияют на обработку событий.

Только SVG (экспериментальный для HTML). Элемент может быть целью события указателя только тогда, когда, например, курсор мыши находится над внутренней частью (т. Е. «Заливка») элемента, а для свойства fill установлено значение, отличное от none , или когда курсор мыши находится над периметр (т. е. «штрих») элемента и свойство stroke устанавливаются на значение, отличное от none . Значение свойства visibility не влияет на обработку событий.

Только SVG. Элемент может быть целью события указателя только тогда, когда указатель находится над внутренней частью (т. Е. Заливкой) элемента. Значения свойств fill и visibility не влияют на обработку событий.

Только SVG. Элемент может быть целью события указателя только тогда, когда указатель находится над периметром (т. Е. Штрихом) элемента. Значения свойств stroke и visibility не влияют на обработку событий.

Только SVG (экспериментальный для HTML). Элемент может быть целью события указателя только тогда, когда указатель находится над внутренней частью (т. Е. Заливкой) или периметром (т. Е. Обводкой) элемента. Значения свойств fill , stroke и visibility не влияют на обработку событий.

Description

Если это свойство не указано, те же характеристики значения visiblePainted применяются к содержимому SVG.

В дополнение к указанию того, что элемент не является целью событий указателя, значение none инструктирует событие указателя пройти «через» элемент и вместо этого нацелить все, что находится «под» этим элементом.

Обратите внимание, что предотвращение того, чтобы элемент был целью событий указателя с помощью событий pointer-events , не обязательно означает, что прослушиватели событий указателя на этом элементе не могут или не будут запущены. Если один из дочерних элементов элемента имеет pointer-events явно разрешающиеэтот дочерний элемент должен быть целью событий указателя, тогда любые события, нацеленные на этот дочерний элемент, будут проходить через родительский элемент по мере того, как событие перемещается по родительской цепочке, и при необходимости запускают прослушиватели событий на родительском элементе. Конечно, любое действие указателя в точке на экране, которая покрывается родителем, но не дочерним, не будет перехвачено ни дочерним, ни родительским (оно будет проходить «сквозь» родителя и нацеливаться на все, что находится под ним).

Элементы с pointer-events: none не получит фокус через последовательную навигацию с помощью клавиатуры Tab key.

Мы хотели бы обеспечить более точное управление (чем просто auto и none ) в HTML для того, какие части элемента заставят его «перехватывать» события указателя и когда. Чтобы помочь нам решить, как pointer-events должны быть расширены для HTML, если у вас есть какие-либо конкретные вещи, которые вы хотели бы делать с этим свойством, то, пожалуйста, добавьте их в раздел «Случаи использования» этой вики-страницы (don не беспокойтесь о том, чтобы содержать его в порядке).

Formal definition

Источник

How to Disable Click Event using CSS?

In HTML, most of the elements are not inherently clickable. Which means that they do not have a default click event attached that is triggered when the user clicks on them.

But, sometimes, we want to prevent the default clicking on elements. For example, if the user has not filled all mandatory fields in the form, we want to keep the submit button disabled i.e. the user shouldn’t be allowed to click on the submit button.

Similar situations can also occur for hyperlinks and inputs where you need to disable the click event.

In this article, We will learn how we can disable click events on various elements with CSS. We will also discuss the pros and cons of using CSS to disable clicking on elements.

Disable Click Event using pointer-events Property

The pointer-events property specifies whether or not an element should allow various pointer events such as mouse hover, mouse click, double click, mouse enter, mouse leave, and so on.

So, if you want to disable click events on any HTML element, you can simply set its pointer-events property to none .

When you set the pointer-events property to none , it disables all kinds of mouse events such as hover, click, double click, etc. on that element. So, the element becomes completely disabled.

Let’s say we have two buttons in our HTML file. We want to disable all click events on the first button, whereas, we want to keep the second button as it is.

To disable all click events on the first button, set its pointer-events property to none . This will make it completely disabled.

/*Disable the button */ .disabled

Below is the outcome of the above code:

As you can see from the above demo image, the first button is not responding to the click event because we have set its pointer-events to none . Whereas, the second button is working normally.

Now, one question arises, will the pointer-events: none; also disable the click event on those HTML elements which do not have a default click behavior, such as a div, paragraph, list?

Well, the answer is yes. The pointer-events: none; works on all elements irrespective of their default click behavior.

Let me show you this with an example.

Let’s say we have two div elements and we have explicitly added a function changeColor() to their onclick attribute, which changes the div’s background color on the click event:

 
Click on me to change color(No pointer-events)
 
This div has pointer-event: none;
 

Inside our JavaScript file, we have defined the changeColor() function, which triggers on the click event and set the clicked div’s background color to yellow:

// Change divs’ background color to yellow function changeColor(target)

Now, we only want to change the background color of the first div element whenever someone clicks on it, whereas, we don’t want the second div to respond to the click event.

To do that, we can simply set its pointer-events property to none . This will prevent all kinds of pointer events.

/*Make the element disabled to pointer events*/ .disabled < pointer-events: none; >div

Below is the outcome of the above code:

Will pointer-events:none; Also Disable Hover Effect?

In the last few examples, we saw how we can disable the click event with pointer-events: none; . But, did you notice that it would also disable other events such as hover, mouseenter, mouseleave, etc. along with the click event?

Well, that is the main problem that we face while disabling the click events with the pointer-events property.

Let me show you this with an example.

Let’s say we have two div elements and we want to disable only the click event on the second div element but we want to keep the hover effects on both divs.

 
This div's pointer events are not disabled.
 
 

Let’s now try to disable the click event on the second div:

Here is the outcome of the above CSS code:

As you can see from the above gif, we only wanted to disable the click event on the second div, but it has also disabled the hover event unknowingly.

So, wherever, you are using the pointer-events: none; , you have to keep in mind that it will disable all kinds of pointer events.

Conclusion

In this article, we learned how we can disable click events using CSS.

To disable click events in CSS, we can use the pointer-events property. If you set the pointer-events property to none , it will disable all kinds of pointer events on that element such as click, hover, mouseenter, mouseleave, dbclick, etc.

Related posts:

Источник

How to Disable Clicking Inside a Div with JavaScript or CSS?

There will be instances where you would want to disable clicking on a div or a section of the page. In this article, we will see how to achieve this in 2 different ways, one using JavaScript and another using CSS.

Disabling click using CSS

Disabling clicking or pressing a div is very simple using css. You just need to add the following line of CSS to the div or any other HTML element.

1.myDiv  
2 pointer-events: none; 
3 >

You can see in the below example the behavior when the click is disabled on buttons. You can apply the above style for other HTML elements as well, not just buttons.

Disabling click using JavaScript

You can disable any click events on a div or button using JavaScript as shown below:

1div id="myDiv">Click Mediv> 
2 
3 script> 
4 const myDiv = document.getElementById("myDiv") 
5 myDiv.addEventListener("click", e =>  
6 e.preventDefault() 
7 >) 
8 script>

You can use e.preventDefault especially if you want to render something as a link and want nothing to happen while the user clicks on it.

1a href="#" id="myLink">Click Mea> 
2 
3 script> 
4 const myLink = document.getElementById("myLink") 
5 myLink.addEventListener("click", e =>  
6 e.preventDefault() 
7 >) 
8 script>

Do follow me on twitter where I post developer insights more often!

Related Articles

Источник