阻止mpvue小程序change事件冒泡

解决方法：给绑定change事件的元素或组件另外添加@click.stop指向一个空函数，用来阻止冒泡

注：此方法主要用于mpvue，@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑定一个空函数

这是在用mpvue开发小程序时遇到一个问题，项目需要引用小程序的picker选择器组件，发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件（项目需要实现对一个模块进行点击跳转，同时要求模块内的一个子元素有选择器功能）

开始通过查看vue文档和小程序文档，找到两种方法，分别是vue的.stop阻止冒泡和小程序的catch前缀，但通过测试发现给change事件直接添加.stop或者catch没有用

最后选用了网上搜到的一个折中的方法，给picker选择器另外添加一个点击事件（或者给选择器的父元素添加点击事件），为新加的点击事件添加阻止冒泡方法，使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题

如果大家还有更好的方法，欢迎留言

bindChange为输入框发生改变事件。微信提供的bindchange在支持方面还有小问题，目前是失去焦点才能触发到此事件的发生。

如果在 bindchange的事件回调函数中使用 setData改变 current值，则有可能导致 setData被不停地调用，因而通常情况下请在改变 current值前检测 source字段来判断是否是由于用户触摸引起。

swiper里加了bindchange事件，有很多个swiper-item，连续快速切换swiper-item触发bindchange事件，小程序会出现一直无限触发bindchange事件。请检查是否在change事件中使用setData改变current值，请避免该 *** 作。

扩展资料

bindchange是swiper组件的属性之一，类型为eventhandle。

current改变时会触发change事件，event.detail={current,source}。当滑块的current改变时会触发该事件并执行绑定的方法。

swiper组件是小程序中使用频次最高的组件之一，属于视图容器类组件，它通过对自身属性进行简单配置就可以实现在前端开发中要写很多代码才能完成的轮播图效果。

参考资料：微信官方文档-swiper

1、首先打开电脑开始菜单，找到微信小程序并打开。创建一个页面文件，插入标签元素视频、绑定变量和控件事件。

2、其次在对应的JavaScript文件中，data对象中初始化变量city、在data对象外侧，添加下拉框change事件selectCity、在view标签中，插入一个button按钮，并绑定点击事件。

3、最后接着定义按钮点击事件updateData，修改city变量的值、保存代码并查看模拟器，点击下拉框可以查看到选项。

---