如何禁用除点击以外的所有鼠标事件？

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

pointer-events属性只有三个属性：

• 没有，
• 汽车，
• 继承

所以，如果你附上

    pointer-events: none;

对于元素，将禁用所有事件。

    pointer-events: auto;

但是，如果元素的父元素具有指针事件：无，则可以恢复所有默认功能。

我认为你会发现有用的解决方法（除了一些JavaScript操作），是将对象包装在父容器中并添加

    pointer-events: none;

到那个父容器并使用：

    pointer-events: auto;

在.info上并将.info添加到容器的子元素中。

它无法完全满足您的需求，但它会复制仅点击幻觉。

Answer 2

一种方法是首先将任何一个元素的所有实例都设为：

 pointer-event:none

例如，我在css文件中将所有img标记作为pointer-event:none：

img{
        pointer-event:none
     }

那么你必须将你的可点击元素（例如img）包含在另一个标签内（如div, span）

例如：

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