我试图在ReactJS组件中使用event.stopPropagation()来阻止click事件冒泡并触发在遗留代码中附加了JQuery的单击事件,但是React的stopPropagation()似乎只停止传播到也附加在React中的事件,而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();
});
});
发布于 2017-11-28 18:02:43
这仍然是一个有趣的时刻:
ev.preventDefault()
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();
如果您的函数由标记包装,请使用此结构
发布于 2018-10-19 01:04:09
值得注意的是(来自this issue),如果您将事件附加到document
,e.stopPropagation()
将不会有所帮助。作为解决方法,您可以使用window.addEventListener()
而不是document.addEventListener
,然后event.stopPropagation()
将停止将事件传播到窗口。
发布于 2016-11-10 15:41:51
我可以通过在我的组件中添加以下代码来解决这个问题:
componentDidMount() {
ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
event.stopPropagation();
}, false);
}
https://stackoverflow.com/questions/24415631
复制相似问题