react 禁止“事件冒泡”

@youngwind 2015-12-18 15:37:45发表于 youngwind/blog React

标题的说法其实不太准确,因为react原生的事件系统本身就是事件代理的,意味着事件会一直冒泡到document进行绑定。所以,使用普通的**event.stopPropagation();**是没有办法在react中实现阻止事件“冒泡”类似的操作的。
stackoverflow和github issue上都有相关的讨论,比如

  1. http://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
  2. https://github.com/facebook/react/search?q=stopPropagation&type=Issues&utf8=%E2%9C%93

最后我找到了一个比较简单地解决方法,就是 react-native-listener

// before use react-native-listener
<a style={hotSpotStyle} onClick={this.handleClick}></a>
// after use react-native-listener
<NativeListener key={index} onClick={this.handleClick}>
      <a style={hotSpotStyle}></a>
</NativeListener>

参考地址:https://www.npmjs.com/package/react-native-listener