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.

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.

• javascript
• css
• click
• mouse
• pointer-events

2 Answers 2

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.

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>