layui treeSelect第三方插件放在from表单下的bug

半路接手的一个前后不分离项目中前段使用了layui插件,其中组织树使用layui第三方插件treeSelect.js。使用过程中出现了一些bug,网上搜索无果,记录一下解决过程。下面是bug的复现:

展开下拉选 点击黑色三角按钮,我们希望的结果是展开点击位置的下级树,但是实际上会收起下拉选!

 

代码如下

layui treeSelect第三方插件放在from表单下的bug_第1张图片

经过多次排查,发现造成上述bug的原因是把使用用到插件的位置放在了from标签内,造成了from的事件冒泡(from本身并没有写事件,不知道为什么会有这个问题)

解决办法

既然是事件冒泡造成的,那么阻止事件冒泡就可以了,找打treeSelect.js 在点击三角符号的监听函数里添加一行代码

event.stopPropagation(); 

layui treeSelect第三方插件放在from表单下的bug_第2张图片

修改完成,测试OK;

                         

也有其他方法,但是这种应该是最方便的,不会影响原有的样式和逻辑。

另外提一下,老版本的treeSelect.js,成功之后的回调方法是有问题的,不能执行,也要对源码进行改动。(其实我是后端开发,弄懂这些东西完全是被逼的),具体改动方法可参考官方最新版本,或者直接替换最新版本。

你可能感兴趣的:(layui,前端)