微信小程序惊,CSS导致JS事件未触发.-js触发小程序事件-小程序模拟点击-即速应用

微信小程序惊,CSS导致JS事件未触发.-js触发小程序事件-小程序模拟点击

浏览量：2691 时间：2020-04-06 来源：車句

前言1.
研究navigationStyle:costom，使用自定义的导航。老规矩，先上设计稿：
2.
要实现左侧的自定义导航，该导航有一个圆角的边框，圆角的啊~
开始3.
移动端经典的1px问题+圆角边框。早期，在.less文件中定义了.border-1px()用于解决移动端1px问题，后期为了兼容圆角边框，又添加了几个变量。
//添加一个设置圆角的.border-1px(@color:#ddd,@pos:bottom,@radius:0rpx)when(@posall){//父元素position:relative;::after{display:block;content:'';position:absolute;top:0;left:0;border:1pxsolid@color;box-sizing:border-box;width:200%;height:200%;border-radius:@radius*2;transform:scale(0.5);transform-origin:lefttop;}}4.
其实是用伪元素+缩放+定位实现了圆角的效果。样式是可以实现的，但是为小图标添加绑定的点击事件，一直没有被触发。
实践5.
遇到问题，解决问题。
6.
首先是排查事件绑定是否有效，其次定义测试元素，为测试元素绑定事件，查看事件是否生效。最后，发现，在导航内容外部，定义元素，绑定事件，是OK的~
7.
问题还是出在导航元素上，排查、排查，在CSS中发现了.border-1px()。。。原来是生成的伪元素，覆盖了导航中的元素，导致点击事件没法触发。
8.
如何解决呢，既要有框又要圆角？
9.
直接使用border:;实现会有1px的问题，视觉效果差，最终的解决方案是box-shadow:001rpx0#ccc。既有边框效果，点击事件也能正常被触发。
总结10.
一行CSS代码竟然影响了JS事件的触发，排查起来还真的耐人寻味。发现问题，分析问题，解决问题，加油↖(^ω^)↗
11.
嘘寒问暖不如打笔巨款~