CSS:响应子元素的鼠标事件,屏蔽父元素的鼠标事件

需求描述

最近遇到这样一个hentai需求:想使用element-ui的多选框tag展示选中项,且支持点击某项进行删除;但需要点击另一个按钮触发弹框进行选择,而非从多选框下拉列表选择。
即:禁用多选框本体的点击事件(点击时不出现下拉列表),但响应多选框里tag的点击事件。
需求示意

需求分析

本杂鱼隐约记得CSS有这样一个属性:pointer-events,用于设置元素是否对鼠标事件做出反应;设置为“none”时不响应鼠标事件,设置为“auto”时响应鼠标事件。

解决思路

在父元素的样式中设置:

pointer-events: none;

在子元素的样式中设置:

pointer-events: auto;

样式修改示意
如果希望保留清除全部选中项的功能,需将el-select的clearable属性设为“true”(默认为false),并设置右侧下拉按钮的样式为不可见但元素存在(会响应鼠标事件,悬浮时变为×图标):

visibility: hidden;

如果不需要清除全部选中项,设置右侧下拉按钮的样式为不可见且元素不存在即可:

display: none;

鼠标“穿透”

pointer-events还可以实现鼠标“穿透”的效果,比如页面中有两个div:A和B,A覆盖在B的上面,那么想要点击B时总会触发A的点击事件。要触发B的点击事件,就可以给A设置pointer-events: none来实现。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值