How do I disable all mouse events except click?
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 event-pointer: no; disables all events.
source to share
The event-pointer attribute has only three properties:
- no one
- auto,
- inherits
So if you attach
pointer-events: none;
for the element, all events will be disabled.
pointer-events: auto;
however restores all the default functionality, and it's good if the parent of the element has event-pointer: none.
A workaround that I think will come in handy for you (besides some JavaScript manipulation) is to wrap your objects in a parent container and add
pointer-events: none;
into this parent container and use:
pointer-events: auto;
on.info and add .info to the children of the container.
It won't accomplish exactly what you're looking for, but it will repeat that click illusion.
source to share
One approach is to create all instances of any elements first as:
pointer-event:none
For example, here I am doing all the tags img
as pointer-event:none
in css files:
img{
pointer-event:none
}
then you have to wrap your interactive element (for example img
) inside another tag (for example div, span
)
For example:
<div class="enclosing-img-class" click="sampleEvent()">
<img src="sample.png" alt="No Image available">
</div>
source to share