diff --git a/src/browser/syntheticEvents/SyntheticEvent.js b/src/browser/syntheticEvents/SyntheticEvent.js index f6012d59cf35..20e39aaf46e8 100644 --- a/src/browser/syntheticEvents/SyntheticEvent.js +++ b/src/browser/syntheticEvents/SyntheticEvent.js @@ -88,7 +88,12 @@ function SyntheticEvent(dispatchConfig, dispatchMarker, nativeEvent) { } else { this.isDefaultPrevented = emptyFunction.thatReturnsFalse; } - this.isPropagationStopped = emptyFunction.thatReturnsFalse; + var propagationStopped = nativeEvent.cancelBubble; + if (propagationStopped) { + this.isPropagationStopped = emptyFunction.thatReturnsTrue; + } else { + this.isPropagationStopped = emptyFunction.thatReturnsFalse; + } } mergeInto(SyntheticEvent.prototype, { @@ -102,7 +107,11 @@ mergeInto(SyntheticEvent.prototype, { stopPropagation: function() { var event = this.nativeEvent; - event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; + if (event.stopPropagation) { + event.stopPropagation(); + } + // PhantomJS doesn't automatically update cancelBubble on stopPropagation. + event.cancelBubble = true; this.isPropagationStopped = emptyFunction.thatReturnsTrue; }, diff --git a/src/browser/ui/__tests__/event-propagation-test.js b/src/browser/ui/__tests__/event-propagation-test.js new file mode 100644 index 000000000000..4ffa49a16a50 --- /dev/null +++ b/src/browser/ui/__tests__/event-propagation-test.js @@ -0,0 +1,77 @@ +/** + * Copyright 2013-2014 Facebook, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @jsx React.DOM + * @emails react-core + */ + +"use strict"; + +var React = require('React'); +var ReactMount = require('ReactMount'); +var mocks = require('mocks'); + +describe('Event propagation', function() { + var stopPropagation; + + function maybeStopPropagation(event) { + if (stopPropagation) { + event.stopPropagation(); + } + } + + var onClick = mocks.getMockFunction(); + + var childContainer = document.createElement('div'); + var childControl =
Child
; + var parentContainer = document.createElement('div'); + var parentControl =
Parent
; + childControl = ReactMount.renderComponent(childControl, childContainer); + parentControl = ReactMount.renderComponent(parentControl, parentContainer); + parentControl.getDOMNode().appendChild(childContainer); + + // PhantomJS event bubbling only works for attached elements. + document.body.appendChild(parentContainer); + + function simulateClick(node) { + if (document.createEvent) { + // Event constructors are not yet supported in PhantomJS. + // https://github.com/ariya/phantomjs/issues/11289 + var event = document.createEvent('MouseEvents'); + event.initEvent('click', true, true); + return node.dispatchEvent(event); + } else { + return node.fireEvent('onclick'); + } + } + + beforeEach(function() { + stopPropagation = undefined; + onClick.mockClear(); + }); + + it('should propagate events down without stopPropagation', function() { + stopPropagation = false; + simulateClick(childControl.getDOMNode()); + expect(onClick.mock.calls.length).toBe(1); + }); + + it('should not propagate events down after stopPropagation', function() { + stopPropagation = true; + simulateClick(childControl.getDOMNode()); + expect(onClick.mock.calls.length).toBe(0); + }); + +}); diff --git a/src/event/EventPluginUtils.js b/src/event/EventPluginUtils.js index bd7608034bb3..2302adaf4e00 100644 --- a/src/event/EventPluginUtils.js +++ b/src/event/EventPluginUtils.js @@ -101,7 +101,7 @@ function forEachEventDispatch(event, cb) { // Listeners and IDs are two parallel arrays that are always in sync. cb(event, dispatchListeners[i], dispatchIDs[i]); } - } else if (dispatchListeners) { + } else if (dispatchListeners && !event.isPropagationStopped()) { cb(event, dispatchListeners, dispatchIDs); } }