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

How to disable all mouse events except click?

本文关键字：鼠标 事件 何禁用 单击      更新时间：2023-09-26

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

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

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

指针事件属性只有三个属性：

  • 无
  • 自动
  • 继承

所以如果你连接

    pointer-events: none;

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

    pointer-events: auto;

但是，可以恢复所有默认功能，并且在元素的父级具有指针事件时非常有用：none。

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

    pointer-events: none;

到父容器并使用：

    pointer-events: auto;

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

它不会完全实现你想要的，但它会复制那种只点击的错觉。

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

 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>
相关文章：