taro 小程序 & touch event 转换 bug

taro 小程序 & touch event 转换 bug

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​​

---

xgqfrms