Google closure library: stopPropagation on components

Question

I am trying to figure out why stopPropagation does not work when used with google closure components. It works fine for browserEvents but not for Events on components. Please see example code below that demonstrates on your browser the phenomenon:

<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>

score 1 · Answer 1 · answered Dec 05 '12 at 03:57

Your example outputs:

inner
outer

In this case, e.stopPropagation works correctly. The console output "outer" is due to outerBtn's own event handler. Not bubbled up from innerBtn. Furthermore, comment out e.stopPropagation, the output will change as below:

innner
outer
outer

Google closure library: stopPropagation on components

1 Answers1