如何禁用除单击之外的所有鼠标事件？答案

【问题标题】：How to disable all mouse events except click?如何禁用除单击之外的所有鼠标事件？
【发布时间】：2015-09-11 05:37:03
【问题描述】：

我想禁用除单击之外的所有鼠标事件，我有这个：

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

但是指针事件：无；禁用所有事件。

【问题讨论】：

标签： javascript css click mouse pointer-events

【解决方案1】：

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

 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>

【讨论】：

【解决方案2】：

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

无，
自动，
继承

所以如果你附上

    pointer-events: none;

对于一个元素，所有事件都将被禁用。

    pointer-events: auto;

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

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

    pointer-events: none;

到那个父容器并使用：

    pointer-events: auto;

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

它不会完全实现您正在寻找的东西，但它会复制那种只有点击的错觉。

【讨论】：