React嵌入组件中的点击事件调用序列

Question

var mark = null; 
class Demo extends React.Component { 
    handleClick(evt) { 
    mark = "outer"; 
    } 
    handleSpanClick(evt) { 
    mark = "inner"; 
    } 
    render() { 
    return (
     <div onClick={this.handleClick.bind(this)}> 
     <span onClick={this.handleSpanClick.bind(this)}> 
      inner 
     </span> 
     </div> 
    ) 
    } 
} 

例如，我希望当点击跨度时标记将是“内部”，但实际上，标记将是“外部”。我知道span的onClick事件将首先被调用，所以我不能得到“内部”。

如何在本示例中获得“内部”？

Answer 1

Example for Bubbling and Capturing in React.js

起泡和拍摄都是由相同的方式由DOM规范所描述的，除了你如何安装 处理 阵营的支持。

<div onClickCapture={this.handleClick.bind(this)}> 
...