如何禁用除单击之外的所有鼠标事件?
How to disable all mouse events except click?
我想禁用除单击之外的所有鼠标事件,我有这个:
.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);
}
但是指针事件:none;禁用所有事件。
pointer-events 属性只有三个属性:
- none,
- 自动,
- 继承
所以如果你附上
pointer-events: none;
对于某个元素,所有事件都将被禁用。
pointer-events: auto;
但是会恢复所有默认功能,如果元素的父元素具有指针事件则非常有用:none.
我认为你会发现一个有用的解决方法(除了一些 JavaScript 操作)是将你的对象包装在父容器中并添加
pointer-events: none;
到该父容器并使用:
pointer-events: auto;
在 .info 上并将 .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>
我想禁用除单击之外的所有鼠标事件,我有这个:
.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);
}
但是指针事件:none;禁用所有事件。
pointer-events 属性只有三个属性:
- none,
- 自动,
- 继承
所以如果你附上
pointer-events: none;
对于某个元素,所有事件都将被禁用。
pointer-events: auto;
但是会恢复所有默认功能,如果元素的父元素具有指针事件则非常有用:none.
我认为你会发现一个有用的解决方法(除了一些 JavaScript 操作)是将你的对象包装在父容器中并添加
pointer-events: none;
到该父容器并使用:
pointer-events: auto;
在 .info 上并将 .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>