React使用事件委派和单个事件侦听器来启动
document冒泡的事件,如本例中的“
click”,这意味着无法停止传播;当您在React中与真实事件互动时,真实事件已经传播了。
stopPropagation由于React在内部处理合成事件的传播,因此可以对React的合成事件进行处理。
使用下面的修补程序来工作JSFiddle。
在jQuery事件上反应停止传播
使用
Event.stopImmediatePropagation以防止你的其他(jQuery的在这种情况下)听众根被调用。IE9
+和现代浏览器都支持它。
stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation();},- 警告:侦听器按照其绑定的顺序进行调用。 必须先将React初始化为其他代码(此处为jQuery),然后才能工作。
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的源代码具有描述性注释:ReactBrowserEventEmitter.js。



