Как отключить все события мыши, кроме как нажать?

Question

Я хочу, чтобы отключить все события мыши, кроме мыши, у меня есть это:

.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); 
} 

но указатель-события: нет; отключает все события.

Answer 1

атрибут Указатель-события имеет только три свойства:

• никто,
• авто,
• INHERIT

Так что, если вы приложите

pointer-events: none; 

Ань элемент все события будут отключены.

pointer-events: auto; 

однако восстанавливает все функциональные возможности по умолчанию, и это полезно, если родитель элемента имеет указатель-события: none.

Обходной, что я думаю, что вы нашли бы полезным (кроме некоторых манипуляций JavaScript), чтобы обернуть свои объекты в родительском контейнере и добавьте

pointer-events: none; 

для этого родительского контейнера и использования:

pointer-events: auto; 

на .info и добавить .info к дочерним элементам контейнера.

Это не будет выполнять именно то, что вы ищете, но оно повторит эту иллюзию щелчка.

Answer 2

Одним из подходов является первым сделать все экземпляры любых одних элементов, как:

pointer-event:none 

Для примера здесь творю все img теги, как pointer-event:none в CSS файлах:

img{ 
     pointer-event:none 
    } 

то есть (например, img) внутри другого тега (например, div, span)

Например:

<div class="enclosing-img-class" click="sampleEvent()"> 
    <img src="sample.png" alt="No Image available"> 
</div>