taro 小程序 & touch event 转换 bug
before
after
事件处理
https://nervjs.github.io/taro/docs/event.html#docsNav
阻止事件冒泡
在 Taro 中另一个不同是你不能使用 catchEvent 的方式阻止事件冒泡。
你必须明确的使用 stopPropagation。
例如，阻止事件冒泡你可以这样写：
class Toggle extends Component {
constructor (props) {
super(props)
this.state = {isToggleOn: true}
}
onClick = (e) => {
e.stopPropagation()
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}))
}
render () {
return (
<button onClick={this.onClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
)
}
}
除了 bind 之外，事件参数也可以使用匿名函数进行传参。
直接写匿名函数不会打乱原有监听函数的参数顺序：
class Popper extends Component {
constructor () {
super(...arguments)
this.state = { name: 'Hello world!' }
}
render () {
const name = 'test'
return (
<Button onClick={(e) => {
e.stopPropagation()
this.setState({
name
})
}}>
{this.state.name}
</Button>
)
}
}
注意： 使用通过 usingComponents 的第三方组件不支持匿名函数
事件系统
事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#事件详解
绑定并阻止事件冒泡
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
事件对象
事件类型
事件分为冒泡事件和非冒泡事件：
冒泡事件：以关键字 on 为前缀，当组件上的事件被触发，该事件会向父节点传递。
非冒泡事件：以关键字 catch 为前缀，当组件上的事件被触发，该事件不会向父节点传递。
https://opendocs.alipay.com/mini/framework/events
https://opendocs.alipay.com/mini/framework/event-object
