事件在部分区域生效

Posted 2023-04-05 MKMU

文章目录

• 1. 结论
• 2. 环境
• 3. 背景
• 4. 解决办法
• • 方法一：利用事件修饰符
  • 方法二：利用CSS样式

1. 结论

建议用第一种解决办法

2. 环境

项目	版本
@vue/cli	5.0.8
vue	2.6.11
vuetify	2.6.13
node	v14.21.3
npm	6.14.18
浏览器	Edge

3. 背景

Vuetify 的 Card 组件，一般由 title 和 text 构成，在绑定点击事件时，既希望保留 Card 本身的点击水波纹效果，又希望此点击效果不在 title 部分生效，而仅仅在 text 部分生效。

4. 解决办法

前提条件，Card 本身绑定要触发的事件

<v-card
	class="card-wrapper"
	color="rgba(6, 20, 54, 0)"
	outlined
	@click="$emit('jump-to-page')"
>

方法一：利用事件修饰符

在 title部分绑定点击事件修饰符 stop

<v-card-title
	class="pa-1"
	style="height: 2vw; cursor: not-allowed;"
	@click.stop
>

在 text 部分绑定点击事件修饰符 prevent

<v-card-text
	class="content"
	style="cursor: pointer;"
	@click.prevent
>

方法二：利用CSS样式

直接在 header 部分使用 CSS 样式 pointer-events: none;，即可实现效果。

<v-card-title
  class="pa-1"
  style="height: 2vw; cursor: not-allowed; pointer-events: none;"
>

position布局影响点击事件以及冒泡获取事件目标

起因：在做一个上传视频的功能时遇到的问题。如下图

上传前：

上传后：

上传后，鼠标划入视频区域，添加提示显示，移出视频区域，添加提示隐藏

视频与添加是同级定位的，且提示语z-index更高，在进行mouseover与mouseout操作时，添加提示语不正常闪烁

问题根因：mouseover生效时，添加提示在视频上方，此时鼠标划入了提示区域，mouseout开始生效。

总结：  元素互相独立，不存在包含于被包含关系时，当整个页面有元素设置position与z-index的值时，为元素绑定事件，只有显示在最上面一层的元素的事件可以起作用。

 

后将提示语包含在了视频代码区域内

此时，将添加提示的position，z-index属性去除，发现取不到子元素

总结：元素存在包含关系时，当父级元素设置了position与z-index的值，子元素也需要设置position的值，不然事件冒泡获取事件目标时，取不到子元素