How to disable all mouse events except click?

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>

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.

Related