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.
The pointer-events attribute only has three properties:
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.