Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <script src="//fb.me/react-15.1.0.js"></script>
    <script src="//fb.me/react-dom-15.1.0.js"></script>
​
    <meta charset="utf-8">
    <title>React bubbling issue</title>
  </head>
  <body>
​
    <input id="native" value="native"/>
    
    <div id="react"></div>
​
​
    <p>Expected behaviour. Steps:</p>
    <ul>
      <li>Type something in <code>native</code></li>
      <li>You get two alerts: 'native', 'body'</li>
    </ul>
​
    <p>Current React behaviour. Steps:</p>
    <ul>
      <li>Type something in <code>react</code></li>
      <li>You get two alerts: 'body', 'react'</li>
    </ul>
  </body>
</html>
​
 
var Example = React.createClass({
​
  onKeyDown: function (event) {
    event.stopPropagation(); // This is not working
    alert(this.props.name);
  },
  
  render: function (){
    return (
      <input onKeyDown={this.onKeyDown.bind(this)} value={this.props.name}/>
    );
  }
});
​
// Whatever other technology, aka jQuery
document.addEventListener("keydown", function () {
  alert('body');
}, false);
​
document.getElementById("native").addEventListener("keydown", function (event) {
  // Toggle this comment if you want to cancel an event and not hit body
  // event.stopPropagation();
  alert('native');
}, false);
​
ReactDOM.render(
  <Example name="react"/>,
  document.getElementById('react')
);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
fcsonlinepro
0viewers