我正在尝试在ReactJS组件中使用event.stopPropagation()来阻止点击事件冒泡并触发遗留代码中使用JQuery附加的单击事件,但似乎React的stopPropagation()仅停止传播到事件也附加在React中,而JQuery的stopPropagation()不会停止传播到React附带的事件.
有没有办法让stopPropagation()在这些事件中发挥作用?我写了一个简单的JSFiddle来演示这些行为:
http://jsfiddle.net/7LEDT/3/
/** @jsx React.DOM */ var Propagation = React.createClass({ alert: function(){ alert('React Alert'); }, stopPropagation: function(e){ e.stopPropagation(); }, render: function(){ return (); } }); React.renderComponent(, document.body); $(function(){ $(document).on('click', '.alert', function(e){ alert('Jquery Alert'); }); $(document).on('click', '.stop-propagation', function(e){ e.stopPropagation(); }); });
Ross Allen.. 150
React使用事件委托和单个事件监听器来document
处理冒泡的事件,比如本例中的"click",这意味着无法停止传播; 当你在React中与它交互时,真实事件已经传播了.stopPropagation
因为React在内部处理合成事件的传播,所以可以使用React的合成事件.
使用Event.stopImmediatePropagation
以防止你的其他(jQuery的在这种情况下)听众根被调用.它在IE9 +和现代浏览器中得到支持.
stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); },
警告:监听器按照绑定的顺序进行调用.必须在其他代码(这里是jQuery)之前初始化React才能使其正常工作.
你的jQuery代码也使用事件委托,这意味着stopPropagation
在处理程序中调用并不会停止任何事情; 事件已经传播到document
,并且将触发React的侦听器.
// Listener bound to `document`, event delegation $(document).on('click', '.stop-propagation', function(e){ e.stopPropagation(); });
为了防止传播超出元素,侦听器必须绑定到元素本身:
// Listener bound to `.stop-propagation`, no delegation $('.stop-propagation').on('click', function(e){ e.stopPropagation(); });
编辑(2016/01/14):澄清说,授权必须仅用于冒泡的事件.有关事件处理的更多详细信息,React的源代码具有描述性注释:https://github.com/facebook/react/blob/b87aabd/packages/react-dom/src/events/ReactBrowserEventEmitter.js#L52-L85
值得注意的是(从本期开始)如果您将事件附加到document
,e.stopPropagation()
将无济于事。解决方法是,您可以使用window.addEventListener()
代替document.addEventListener
,然后event.stopPropagation()
阻止事件传播到窗口。
仍然是一个有趣的时刻:
ev.preventDefault() ev.stopPropagation(); ev.nativeEvent.stopImmediatePropagation();
如果您的函数由标签包裹,请使用此构造
我能够通过在我的组件中添加以下内容来解决这个问题:
componentDidMount() { ReactDOM.findDOMNode(this).addEventListener('click', (event) => { event.stopPropagation(); }, false); }
我昨天遇到了这个问题,所以我创建了一个React友好的解决方案.
查看react-native-listener.到目前为止,它运作良好.反馈意见.
React使用事件委托和单个事件监听器来document
处理冒泡的事件,比如本例中的"click",这意味着无法停止传播; 当你在React中与它交互时,真实事件已经传播了.stopPropagation
因为React在内部处理合成事件的传播,所以可以使用React的合成事件.
使用Event.stopImmediatePropagation
以防止你的其他(jQuery的在这种情况下)听众根被调用.它在IE9 +和现代浏览器中得到支持.
stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); },
警告:监听器按照绑定的顺序进行调用.必须在其他代码(这里是jQuery)之前初始化React才能使其正常工作.
你的jQuery代码也使用事件委托,这意味着stopPropagation
在处理程序中调用并不会停止任何事情; 事件已经传播到document
,并且将触发React的侦听器.
// Listener bound to `document`, event delegation $(document).on('click', '.stop-propagation', function(e){ e.stopPropagation(); });
为了防止传播超出元素,侦听器必须绑定到元素本身:
// Listener bound to `.stop-propagation`, no delegation $('.stop-propagation').on('click', function(e){ e.stopPropagation(); });
编辑(2016/01/14):澄清说,授权必须仅用于冒泡的事件.有关事件处理的更多详细信息,React的源代码具有描述性注释:https://github.com/facebook/react/blob/b87aabd/packages/react-dom/src/events/ReactBrowserEventEmitter.js#L52-L85