Geek Answers Handbook

Google closure library: stopPropagation on components

I am trying to understand why stopPropagation does not work when used with Google's closure components. It works great for browsers, but not for events on components. Please see the sample code below that demonstrates the phenomenon in your browser:

<html> <head> <script type="text/javascript" src="closure/goog/base.js"></script> </head> <body> <div id="div1" style="border: 1px solid black; width: 500px; height: 300px; padding: 10px"> <div id="div2"></div> </div> <script> goog.require('goog.dom'); goog.require('goog.ui.CustomButton'); goog.require('goog.ui.Component'); goog.require('goog.ui.Control'); goog.require('goog.style'); </script> <script> var outerBtn = new goog.ui.Control(); outerBtn.decorate(goog.dom.$('div1')); var innerBtn = new goog.ui.CustomButton('Inner Button'); outerBtn.addChild(innerBtn, true); outerBtn.setSupportedState(goog.ui.Component.State.FOCUSED, false); innerBtn.setSupportedState(goog.ui.Component.State.FOCUSED, false) goog.style.setStyle(innerBtn.getElement(), { border : '1px solid red', height : '100px' }); goog.events.listen(outerBtn, goog.ui.Component.EventType.ACTION, function() { console.info('outer'); }); goog.events.listen(innerBtn, goog.ui.Component.EventType.ACTION, function(e) { console.info('inner'); e.stopPropagation(); }); </script> </body> </html>
+4
source share
1 answer

The result of your example:

 inner outer

In this case, e.stopPropagation works correctly. The console output "external" is connected to the external event handler outerBtn. Not bubbling up from innerBtn. Also, comment out e.stopPropagation, the result will change as shown below:

 innner outer outer
+1
source

More articles:


All Articles