How to disable all mouse events except click?

Question

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.

Answer 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.