pointer-events用法

用c3做动效的时候遇到层级问题很不好处理,导致前面的元素影响后面元素的鼠标事件。被这个问题困扰好久突然想到有没有什么属性能让元素被虚化,点击事件可以渗透。发现了这个神奇的用法。
svg之外的元素支持两个值:none和auto.
auto是默认值就不解释了。
none:MDN上的解释是这样的,元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
也就是说添加了pointer-events:none的元素,其子元素依然可以通过添加pointer-events:auto恢复鼠标事件。如果想让父元素虚化,又想让其子元素存在鼠标事件,简直太好用了
不过该属性的兼容性不太好,使用的时候要考虑下。
在这里插入图片描述
这是要实现的效果,虚线的大圆圈是可以旋转的,实际上是一个很大的定位元素旋转了角度,它和地图都是定位元素,但由于旋转了角度,红线下面的部分都是大圆圈的地盘,我的地图南部地区点不到了,很头疼!!!
给大圆圈加上pointer-events:none;就可以点到地图的任何地方。
但是问题又来了,旅游,交通,台风这些按钮的点击事件也没了,给这些按钮加上pointer-events:auto;
bug都没了,完美。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大学生参加学科竞赛有着诸多好处,不仅有助于个人综合素质的提升,还能为未来职业发展奠定良好基础。以下是一些分析: 首先,学科竞赛是提高专业知识和技能水平的有效途径。通过参与竞赛,学生不仅能够深入学习相关专业知识,还能够接触到最新的科研成果和技术发展趋势。这有助于拓展学生的学科视野,使其对专业领域有更深刻的理解。在竞赛过程中,学生通常需要解决实际问题,这锻炼了他们独立思考和解决问题的能力。 其次,学科竞赛培养了学生的团队合作精神。许多竞赛项目需要团队协作来完成,这促使学生学会有效地与他人合作、协调分工。在团队合作中,学生们能够学到如何有效沟通、共同制定目标和分工合作,这对于日后进入职场具有重要意义。 此外,学科竞赛是提高学生综合能力的一种途径。竞赛项目通常会涉及到理论知识、实际操作和创新思维等多个方面,要求参赛者具备全面的素质。在竞赛过程中,学生不仅需要展现自己的专业知识,还需要具备创新意识和解决问题的能力。这种全面的综合能力培养对于未来从事各类职业都具有积极作用。 此外,学科竞赛可以为学生提供展示自我、树立信心的机会。通过比赛的舞台,学生有机会展现自己在专业领域的优势,得到他人的认可和赞誉。这对于培养学生的自信心和自我价值感非常重要,有助于他们更加积极主动地投入学习和未来的职业生涯。 最后,学科竞赛对于个人职业发展具有积极的助推作用。在竞赛中脱颖而出的学生通常能够引起企业、研究机构等用人单位的关注。获得竞赛奖项不仅可以作为个人履历的亮点,还可以为进入理想的工作岗位提供有力的支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值