微信小程序：惊！CSS导致JS事件未触发...

前言

研究navigationStyle:costom，使用自定义的导航。老规矩，先上设计稿：

要实现左侧的自定义导航，该导航有一个圆角的边框，圆角的啊~

开始

移动端经典的1px问题+圆角边框。早期，在.less文件中定义了.border-1px()用于解决移动端1px问题，后期为了兼容圆角边框，又添加了几个变量。

// 添加一个设置圆角的
.border-1px(@color: #ddd, @pos: bottom, @radius: 0rpx) when (@pos = all){
	// 父元素
	position: relative;
	&::after{
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid @color;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		border-radius: @radius*2;
		transform: scale(0.5);
		transform-origin: left top;
	}
}

其实是用伪元素+缩放+定位实现了圆角的效果。样式是可以实现的，但是为小图标添加绑定的点击事件，一直没有被触发。

实践

遇到问题，解决问题。

首先是排查事件绑定是否有效，其次定义测试元素，为测试元素绑定事件，查看事件是否生效。最后，发现，在导航内容外部，定义元素，绑定事件，是OK的~

问题还是出在导航元素上，排查、排查，在CSS中发现了.border-1px()。。。原来是生成的伪元素，覆盖了导航中的元素，导致点击事件没法触发。

如何解决呢，既要有框又要圆角？

直接使用border: ;实现会有1px的问题，视觉效果差，最终的解决方案是box-shadow: 0 0 1rpx 0 #ccc。既有边框效果，点击事件也能正常被触发。

总结

一行CSS代码竟然影响了JS事件的触发，排查起来还真的耐人寻味。发现问题，分析问题，解决问题，加油↖(^ω^)↗

嘘寒问暖 不如打笔巨款~