Question

15

How to disable all mouse events except click?

rated 0 times [ 17] [ 2] / answers: 1 / hits: 33143 / 9 Years ago, wed, june 24, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tiffany

Add To Favorites

Follow

Total Points: 46

Total Questions: 97

Total Answers: 84

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

answered 9 Years ago daquanmilesw · Accepted Answer

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.