How to disable all mouse events except click?
Solution 1
The pointer-events attribute only has three properties:
- none,
- auto,
- inherit
So if you attach
pointer-events: none;
to an element all events will be disabled.
pointer-events: auto;
however restores all default functionality and is good for if an element's parent has pointer-events: none.
A workaround that I think you'd find useful (aside from some JavaScript manipulation), is to wrap your objects in a parent container and add
pointer-events: none;
to that parent container and use:
pointer-events: auto;
on .info and add .info to the child elements of the container.
It won't accomplish exactly what you're looking for but it will replicate that click only illusion.
Solution 2
One approach is to first make all instances of any one elements as :
pointer-event:none
For example here I am making all img
tags as pointer-event:none
in css files:
img{
pointer-event:none
}
then you have to enclose your clickable element( for e.g img
) inside another tag(like div, span
)
For example:
<div class="enclosing-img-class" click="sampleEvent()">
<img src="sample.png" alt="No Image available">
</div>
ნიკა ბერიძე
Updated on August 01, 2022Comments
-
ნიკა ბერიძე almost 2 years
I want to disable all mouse events except click, I have this:
.info { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; border-radius: 4px; pointer-events: none; background-color: rgba(26, 188, 156, 0.9); }
but pointer-events: none; disables all events.