How to prevent the click event using CSS ?
I have created the form page , then i need to prevent the click event using only CSS?
I have tried this css property, but not worked.
<div>Content</div>
div {
display: none;
}
3 Answers
You can try the css class:
.noClick {
pointer-events: none;
}
answered Aug 21, 2017 at 11:30
kevinSpaceyIsKeyserSöze
4,4902 gold badges18 silver badges29 bronze badges
3 Comments
iPzard
Yeah, but how to still allow hover actions on that element? For example; .noClick:hover { cursor: not-allowed; }
kevinSpaceyIsKeyserSöze
@iPzard check this out.
iPzard
Thanks! I ended up using a JavaScript solution, but this CSS one would be better if it works. I'll have to give it a try tomorrow.
I did the following to still allow hover events:
element.addEventListener("focusin", function(event) {
this.blur()
})
It 'removes' focus from the element once focused. This way we're making sure it can't gain focus at all.
It's very suitable for the input tag, for example.
Note you must not use the event.preventDefault function in combination with the focus event.
Comments
Try this:
document.body.addEventListener("selectstart", function(event) {
event.preventDefault();
});
I'd seen it recently used in a test-practice website which was trying to prevent me from copy/pasting the site for notes taking. It was pretty effective, took me about an hour to finally track down what was causing it.
1 Comment
j08691
The question asks for a CSS solution, not JavaScript
display: nonejust hides the element which makes it indeed not clickable, but I presume that's not what you want. I recommend give a class to the element(s) you want to hide and create a CSS rule for it. For example:div.not-clickable { pointer-events: none; }- developer.mozilla.org/en/docs/Web/CSS/pointer-events