半路接手的一个前后不分离项目中前段使用了layui插件,其中组织树使用layui第三方插件treeSelect.js。使用过程中出现了一些bug,网上搜索无果,记录一下解决过程。下面是bug的复现:
展开下拉选 点击黑色三角按钮,我们希望的结果是展开点击位置的下级树,但是实际上会收起下拉选!
代码如下
经过多次排查,发现造成上述bug的原因是把使用用到插件的位置放在了from标签内,造成了from的事件冒泡(from本身并没有写事件,不知道为什么会有这个问题)
解决办法
既然是事件冒泡造成的,那么阻止事件冒泡就可以了,找打treeSelect.js 在点击三角符号的监听函数里添加一行代码
event.stopPropagation();
修改完成,测试OK;
也有其他方法,但是这种应该是最方便的,不会影响原有的样式和逻辑。
另外提一下,老版本的treeSelect.js,成功之后的回调方法是有问题的,不能执行,也要对源码进行改动。(其实我是后端开发,弄懂这些东西完全是被逼的),具体改动方法可参考官方最新版本,或者直接替换最新版本。