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

为什么会说到这个呢?是我觉得没有识别出来,然后就导致了这样的问题,这种情况不应该发生。我写了如下这样一段代码,但是发现当自己选择时间的时候无法选择。然后就发现变成了光标在闪烁。这样其实就是因为我选择到了这个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,然后在它的子元素上绑定事件,这样鼠标交互会直接在子元素上触发事件,跳过中间元素

相关推荐
用户02670019949418 分钟前
[深入了解Google Trends API的使用与优化指南]
前端
hunter20620628 分钟前
linux通过web向mac远程传输字符串,mac收到后在终端中直接打印。
linux·前端·macos
XinShun2 小时前
sqlalchemy The transaction is active - has not been committed or rolled back.
前端·数据库·python
tangtang1232 小时前
探索 Google BigQuery Vector Search:大规模语义搜索和嵌入式管理
前端
LikM2 小时前
RxJS 介绍
前端
aricvvang2 小时前
前端学习笔记 - 布局方式总结
前端·css·html
沐沐霸3 小时前
day25_HTML
前端·html
MickeyCV3 小时前
Web前端开发技术之HTML&CSS知识点总结
前端·css·html
哟哟耶耶3 小时前
js-判断一个object(对象)是否为空
前端·javascript·vue.js
Mrs_Lupin3 小时前
Webpack简述
前端·webpack