前端小知识鼠标穿透 pointer-events: none；

蓝奕世2025-01-19 16:40

为什么会说到这个呢？是我觉得没有识别出来，然后就导致了这样的问题，这种情况不应该发生。我写了如下这样一段代码，但是发现当自己选择时间的时候无法选择。然后就发现变成了光标在闪烁。这样其实就是因为我选择到了这个input框的鼠标事件，而没有触发u-picker的鼠标事件，所以导致了不能弹出时间选择器。

css 复制代码

<template v-if="isTime(item.fieldType)">
				<u-picker mode="time" v-model="item.calendarShow" startYear="1922"
					:params="params(item.fieldTypeTime)"
					@confirm="confirm($event, index, item.fieldTypeTime)"></u-picker>
				<u-input class="date-holder" :placeholder="`请选择${item.fieldValue}`" v-model="detail[item.fieldKey]" type="text" disabled
					@click="item.calendarShow = true"></u-input>
			</template>

依靠这个解决了，其实就是很简单，就是取消与input的鼠标交互的事件，然后能直接去触发别的的鼠标事件

css 复制代码

<style lang="scss" scoped>
	.form-fields {
		::v-deep {
			.date-holder input {
				pointer-events: none;
			}
		}
	}
</style>

总结知识：

一、鼠标穿透： pointer-events: none;

pointer-events:none；是 CSS3 中的一个属性，主要用于控制元素是否响应鼠标或触摸事件。当元素的 pointer-events 属性被设置为 none 时，该元素及其子元素将无法与鼠标或触摸设备产生交互作用，即无法触发事件。

二、使用场景

1、实现特殊效果

在一个元素上覆盖一个透明的层，同时禁用用户对下面元素的操作

2、实现视差滚动效果

通过使滚动层无法响应交互，实现粘性效果

3、实现遮罩层

使下层元素无法响应事件，产生遮蔽遮罩的效果

4、修复点击穿透问题

在一个元素的子元素上设置 pointer-events: none，可以防止点击事件穿透到父层元素上

5、改变鼠标事件的触发对象

可以在一个元素上设置 pointer-events: none，然后在它的子元素上绑定事件，这样鼠标交互会直接在子元素上触发事件，跳过中间元素

前端小知识 鼠标穿透 pointer-events: none；

前端小知识鼠标穿透 pointer-events: none；