xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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

---