我正在尝试在ReactJS组件中使用event.stopPropagation()来阻止单击事件冒泡并触发遗留在JQuery中的遗留代码中的click事件,但是似乎React的stopPropagation()仅停止传播到事件也附加在React中,并且JQuery的stopPropagation()不会停止传播到随React附加的事件。
有什么办法可以使stopPropagation()在这些事件中起作用?我编写了一个简单的JSFiddle来演示这些行为:
/** @jsx React.DOM */
var Propagation = React.createClass({
alert: function(){
alert('React Alert');
},
stopPropagation: function(e){
e.stopPropagation();
},
render: function(){
return (
<div>
<div onClick={this.alert}>
<a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>
</div>
<div className="alert">
<a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>
</div>
<div onClick={this.alert}>
<a href="#" className="stop-propagation">JQuery Stop Propagation on React Event</a>
</div>
<div className="alert">
<a href="#" className="stop-propagation">JQuery Stop Propagation on JQuery Event</a>
</div>
</div>
);
}
});
React.renderComponent(<Propagation />, document.body);
$(function(){
$(document).on('click', '.alert', function(e){
alert('Jquery Alert');
});
$(document).on('click', '.stop-propagation', function(e){
e.stopPropagation();
});
});
更新:现在可以
<Elem onClick={ proxy => proxy.stopPropagation() } />