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

---