CODEWITHSUNDEEP
htmlcss
M K
M K

Reputation: 2157

How to prevent the click event using CSS?

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;
}

Upvotes: 133

Views: 246386

Answers (3)

kevinSpaceyIsKeyserS&#246;ze
kevinSpaceyIsKeyserS&#246;ze

Reputation: 4380

You can try the css class:

.noClick {
   pointer-events: none;
}

Upvotes: 315

france1
france1

Reputation: 169

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.

Upvotes: 1

Stephen - Developer
Stephen - Developer

Reputation: 31

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.

Upvotes: -3

Related Questions